In articolul anterior, am prezentat o metoda prin care putem sa aliniem elementele unui formular fara sa folosim tabele. De asemenea, am aplicat si cateva stiluri pentru ca elementele formularului sa arate mai bine.
Printre aceste stiluri se afla si unul care era menit sa faca elementele de tip input sa arate mai bine. Codul arata asa:
input {
width: 200px;
padding: 3px;
border: 2px solid #e5e5e5;
margin-bottom: 3px;
color: #666;
font-size: 12px;
}
Astfel, elementele input din formular aratau asa:
Insa am descoperit ca in Google Chrome apare o problema. Cei de la Google au implementat un stil implicit care poate ar putea fi util: input-ul selectat are o margine galbena in jurul sau.
Acest lucru poate fi util, in conditiile in care avem multe input-uri si vrem sa stim care este cel activ. Dar sunt situatii in care nu ne dorim sa se intample acest lucru. Pentru a corecta aceasta problema folosim pseudo-selectorul :focus. Codul arata asa:
input:focus {
outline: none;
}
Asta e tot. Acum input-urile vor arata la fel in Google Chrome si atunci cand sunt selectate. De mentionat ca aceeasi problema apare si la elementul textarea si ca problema se rezova aplicand textarea:focus { } in CSS-ul nostru.
Pentru ca motorul din spatele Google Chrome este Webkit, presupun ca aceeasi problema ar putea aparea si in Safari. Pe de alta parte, acesta ar putea fi un stil implicit adaugat in soft-ul Google Chrome, si care nu are legatura cu motorul de randare din spate. Nu pot sa testez acest lucru, pentru ca nu am Safari instalat si nu am de gand sa-l pun doar pentru asta.