SELECT display difference between browsers

2

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:

DetailitonlyappliestheCSScodetotheOPTIONthatloadswiththepage.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?

    
asked by anonymous 13.08.2014 / 22:01

1 answer

1

Hello,

Try to see if you find something cool that suits your browser support requirements.

Some cool experiments with select also, you just need to check browser support:

I hope I have helped ... =)

    
15.08.2014 / 23:13