8
I need to stylize the text inside the select
, how to leave centered, put margins. I’m putting the class name more option
and putting what I desire, but it is not working. I did so:
HTML
<h3 class="imobBoxTipoTitulo">Tipo</h3>
<div>
<select class="imobBoxTipo">
<option>Todos</option>
<option>Teste1</option>
<option>Teste2</option>
</select>
</div>
<div class="clear"></div>
<div class="imobValor">
<div class="imobValorEsq">
<h3 class="imobBoxTipoTitulo">Valor</h3>
<select class="imobBoxTipo imobBoxTipoValor">
<option>De</option>
<option>Teste1</option>
<option>Teste2</option>
</select>
</div>
<div class="imobValorDir">
<select class="imobBoxTipo imobBoxTipo">
<option>Até</option>
<option>Teste1</option>
<option>Teste2</option>
</select>
</div>
</div>
CSS
.imobBoxTipoTitulo{font-family: "Trebuchet MS", Helvetica, sans-serif;font-size: 9px;font-weight: bold;color:#b8b8b8;text-transform: uppercase;}
.imobBoxTipo{
width: 220px;
float: left;
height: 34px;
overflow: hidden;
background: url(../images/arrow.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
}
.imobBoxTipo select{
width: 260px;
margin-left: 16px;
background-color: #f2f2f2;
height: 38px;
line-height: 38px;
font-family: "Trebuchet MS", Helvetica, sans-serif!important;
color: #515151;
font-size: 12px;
background: transparent;
}
.imobBoxTipoValor{width: 110px;}
Related: http://answall.com/questions/3942/como-fazer-styryr-a-tag-select
– bfavaretto
And also: http://answall.com/questions/3827/comor-forcar-que-os-elements-option-aparecam-abaixo-do-select-no-ie/3828#3828
– bfavaretto
What happens is that the select arrow is getting above the background-image. http://felipestoker.com/imob/
– Felipe Viero Goulart
have how to get around this by creating a smaller div as the parent of select and setting it with a background-image that has a "arrow" - But Important: must be smaller enough so that the original arrow does not appear.
– Paulo Roberto Rosa