input type=”search”

Dacă săptămâna trecută ți-am povestit despre placeholder, acum îți voi povesti puțin despre input type="search". La fel ca și placeholder, search este un atribut nou, semantic, introdus de html5. Problema numărul unu este că nu e cross browser. Adică IE nu știe de el. Din fericire, input-urile necunoscute sunt afișate ca input type="text", deci suntem … în siguranță, ca să zic așa.

Problema numărul doi este că browserele în care merge sunt ușor încăpățânate. Safari și Chrome (webkit) afișează într-un fel, Firefox 4 în alt fel. De exemplu, în webkit nu poți suprascrie următoarele stiluri:

input[type=search] {
        padding: 30px;            /* Overridden by padding: 1px; */
        font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
        border: 5px solid black;  /* Overridden by border: 2px inset; */
        background: red;          /* Overridden by background-color: white; */
}

Via.

Problema o rezolvi relativ ușor, folosind următoarea regulă în css:

input[type="search"] { -webkit-appearance: textfield; }

Enjoy!