Option Styling via CSS [closed]

Navigation
0

I made some Select and within them there Options . I tried to stylize the Option, but I'm not getting it, am I doing something wrong?

HTML: 

<div class="imobSelect">
 <select>
  <option>Todos</option>
  <option>teste1</option>
  <option>teste2</option>
 </select>
</div>

CSS: 

.imobSelect select {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: transparent;
width: 233px;
color: #474747;
padding: 8px 5px 5px 5px;
font-size: 12px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;}

.imobSelect option {
    height: 30px;
    border: 1px solid #cbcbcb;
    padding-left: 17px;
    padding-top: 12px;}

.imobSelect {
    width: 207px;
    height: 34px;
    overflow: hidden;
    background: url(../images/arrow.jpg) no-repeat right #f0f0f0;
    border-radius: 3px;}

Where am I going wrong?

    
asked by anonymous 25.03.2014 / 02:19

3 answers

3

Options are really one of the worst elements of styling. The support given by browsers varies greatly. I would not recommend trying to style these elements if you want visual consistency between browsers.

  • Chrome: accepts color , background-color and nothing else I tested
    • IE8: accepts only color and background-color , but in addition, when one of the options is selected, the text of the select is equal to that of the option

    / li>
  • Firefox: accepts all styles I tested

Javascript solution

If a javascript solution is acceptable, I would recommend chosen . It overrides select by ul and li s, which can be stylized. This plugin depends on jQuery, so it may not be an option for you.

    
25.03.2014 / 14:31
0

Whenever you try to stylize an option you will not stylize it, just a few assignments given to the selects will also be assigned to the options. For example 

select{
    width: 250px;
    height: 50px;
    font-size: 20px;
    background: #f2f2f3;
    padding-left: 100px
}

In the case of text-align: center this does not work, just use the padding-left to align. And in the options it has received the formatting of the select, but will remain with its size and other requirements standardized by the browser.

And if you want to style that little set of selects. Here is an example in jquery

    
25.03.2014 / 14:07
0

I changed the bakcground line (I removed the background color and it worked normally) 

background: url(../img/arrow.jpg) no-repeat right;

Make sure this is the problem.

    
25.03.2014 / 12:04
Clear inputs inside form after sending the message Gray lines in Chrome [closed]