I'm doing a < select > customizable. The problem is the different renderings that happen in browsers. In fact, you would just have to hide the arrows that appear:
in IE:
andinFF:
In Chrome and Opera they were hidden (Same rendering engine).
Thank you!
In this gist there are several proposals to resolve this bug reported a long time ago . I remember using the moz-appearance:none property a few months ago and having worked, I was creating an example to answer that question and ... SURPRISE, crashed in recent Firefox updates.
Create a parent element with a defined width and overflow:hidden (to hide what goes beyond the limit). And, in% w / o%, set a width greater than that of the parent element. For example:
.select {
border: 1px solid #ccc; /*para "contornar" o select*/
display: block;
overflow: hidden;
width: 350px
}
.select > select {
border: none;
padding: 5px;
width: 110% /* 10% para esconder a seta :) */
}<span class='select'>
<select>
<option disabled selected>Selecione um destino</option>
<option>São Paulo</option>
<option>Rio de Janeiro</option>
<option>Tangamandapio</option>
</select>
</span> Another alternative is to create a custom component and this does not have a correct way to do it, each developer will do the way that suits him best. But here's an example I got using a lot of gambiarra Font Awesome to change the default arrow and select to control the placement of elements:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
/* Esconder no IE 10 */
select::-ms-expand {
display: none
}
/* Outros navegadores */
select {
-webkit-appearance: none;
appearance: none
}
select:focus {
outline: none;
}
/* Caixa em volta do select */
.select {
position: relative;
width: 500px;
z-index: 1
}
/* A seta */
.select:before {
display: block;
font-family: 'FontAwesome';
height: 100%;
position: absolute;
top: 0; right: 0;
width: 1em;
z-index: -1
}
.select > select {
display: block;
margin: 0;
padding: .5em;
width: 100%;
}
/**
* Pseudo-class 'any', referência:
* https://developer.mozilla.org/en-US/docs/Web/CSS/:any */
:-moz-any(.select):before {
background-color: #fff;
pointer-events: none;
z-index: 1;
}
/**
* O código abaixo não tem relevância, o único propósito
* é tornar o exemplo 'apresentável' esteticamente. */
.select {
background-color: #fff;
border: 1px solid #ccc;
margin: 0 0 2em;
padding: 0;
}
.select:hover {
border-color: #333;
}
.select:before {
color: #333;
font-size: 1em;
line-height: 2.5em;
padding: 0 0.625em;
text-align: center;
}
.select > select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
font-size: 100%;
line-height: normal;
}<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'/>
<div class='select fa-caret-down'>
<select name=''>
<option selected disabled>Esporte Favorito</option>
<option>Basquete</option>
<option>Futebol</option>
<option>Volei</option>
<option>Outro</option>
</select>
</div> In my opinion The best thing to do so far (ie while you can not guarantee that the CSS rule will affect the appearance of z-index ) is to use a plugin that guarantees display the same result independent of the browser of the user, for example:
JQuery SelectBox plugin
Custom Select
SelectBoxIt
< FancySelect
This page has several other plugins for the same purpose.
-webkit-appearance: none; /* Remove estilo padrão do Chrome */
-moz-appearance: none; /* Remove estilo padrão do FireFox */
appearance: none; /* Remove estilo padrão do FireFox*/