I have the following code HTML
that marks a SELECT
:
<select name="filtro">
<option value="">Mais visualizados</option>
<option value="">Menos visualizados</option>
<option value="">Mais Recentes</option>
</select>
Give this result to Chrome:
DetailitonlyappliestheCSScodetotheOPTION
thatloadswiththepage.Thefollowingdoesnotstylewiththesamefont-weight
,thisinChrome.FollowtheCSS:
.filtroselect{font-family:Lato,Calibri,Arial,sans-serif;font-weight:300;clear:both;border-radius:3px;padding:5px;font-size:14px;position:relative;left:650px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;}
NowinFirefoxitintroducesthis:
With the appearance
property I try to take away the appearance of the engine being used at the moment. However, this only worked in Chrome. Already in Firefox it applies that downward arrow.
Has anyone ever gone through this? Any solution?