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:
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:
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?
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.)– bfavaretto
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– Felipe Viero Goulart