SELECT display difference between browsers

Asked

Viewed 179 times

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>

Gives this result in Chrome:

inserir a descrição da imagem aqui

Detail it only applies the CSS code to the OPTION that loads together with the page. The following he does not stylize with the same font-weight, this in Chrome. Follow the CSS:

.filtro select{
  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;
}

Already in Firefox it presents this:

inserir a descrição da imagem aqui

With the property appearance I try to take away the appearance of the engine that is being used at the moment. However, this only worked in Chrome. Already in Firefox it applies this down arrow.

Has anyone been through this? Any solution?

css google-chrome select firefox
  • 3

    Stylization of <select> and <option> even varies according to the browser. The only guaranteed solution is to create your own select simulacrum, using Divs, css and js (and preferably using a hidden select like fallback, ensuring accessibility, etc.)

  • 1

    I gave up styling <select> and <option>, When I need something, I look for a plugin. I asked a similar question here https://answall.com/questions/9487/stylize%C3%A7%C3%A3o-de-select-via-css

1 answer

1


Browser other questions tagged css google-chrome select firefox

You are not signed in. Login or sign up in order to post.