Stylization of Option via CSS

Asked

Viewed 18,253 times

0

did some Select and within them there are Options. I tried styling Option, only I’m not getting it, I’m 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?

css html-option
  • 1

    What is missing?

  • If you go here www.felipestoker.com/imob you will see that Options are not stylized in Chrome. And that in Mozilla, it gets a black border around it.

  • 2

    What is going wrong?

  • Could you clarify what your doubt is? It’s hard to understand what you need.

  • What exactly was the goal with these styles? Which part did not turn out as you would like? What is the question? More details would help clarify.

  • I already found what I needed. Styling Options is too boring, each browser treats it with particularities.

Show 1 more comment

3 answers

4


Options are really one of the worst elements of styling. The support given by browsers varies a lot. I wouldn’t recommend trying to style these elements if you want consistency of look across browsers.

  • Chrome: accepted color, background-color and nothing else I tested

  • IE8: accepted only color and background-color, but also, when one of the options is selected, the select text is equal to the option

  • Firefox: accepts all styles I tested

Javascript solution

If a javascript solution is acceptable, I would recommend the Chosen. It replaces the select by ul and lis, which can be stylized. This plugin depends on jQuery, so maybe not an option for your case.

  • True, I was analyzing the Forms tags, and it really is very boring to style without using Javascript. I’ll have to analyze some plugin and use it. Thank you very much.

0

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

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

Check if that was the problem.

  • 1

    It is good practice for those who vote no to explain why. We are a community and so we learn more from each other.

0

Whenever you try to style an option you will not style it, only some 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, to align just use the padding-left. And in the options they received the select format but will be with their size and other requirements standardized by the browser.

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

Browser other questions tagged css html-option

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