CSS Webkit prikaz vnosnih polj

CSS-Webkit-prikaz-vnosnih-polj

Testiranja spletnih strani na različnih napravah in brskalnikih so pokazala, da se v večini primerov posamezni elementi prikazujejo enako oz. z manjšimi anomalijami, ki niso preveč moteče. Edini večji problem pa nastane, ko začnemo testirati “native” elemente, kot so vnosna polja za iskanje, besedilu ali gumbe.

Pri uporabi teh elementov nekateri brskalniki, kot je npr. Safari uporabijo svoje stile, ki spremenijo izgled, ki ga želimo imeti. Te spremembe se ponavadi odražajo v obliki senc, prelivov ali zaobljenih robov.

Rešitev se skriva v specifikaciji “Safari’s CSS Reference”, ki nam predstavi značko -webkit-appearance, ki vpliva na sam izgled elementov vnosnih polj in gumbov. Da izničimo”native” stile moramo tako na želenih elementih vklopiti le značko -webkit-appearance:none;.

Primer uporabe:

input {
-webkit-appearance:none;
}

Dodatne informacije: https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html

Komentiraj


*