CSS select option bug

Question

I have problem with select and options, in firefox I see this normal (small), but in google chrome, it's very big and not pretty!

The 2nd photo shows - what I want to see and 1st shows - what I see.

enter image description here

I want in <option>:

font-size: 20px;

I want in <select>:

text-align: center;

<select id="what">
 <option value="0">0</option>
 <option value="100">100</option>
 <option value="1000">1000</option>
</select>
<style>
    #what {
        width: auto;
        height: 60px;
        border: 0px solid #333;
        appearance: none;
        text-align: center;
        -moz-appearance: none;
        -webkit-appearance: none;
        font-size: 45px;
        color: red;
        background: rgba(0,0,0,0);
        border-bottom: 1px solid red;
        outline: none;
    }
    #what > option {
        height: 40px;
        color: #333;
        border: 0px; 
    }
</style>

Please help.

We would need to see the code to have any chance of figuring out what the problem is. — Anonymous, May 19 '15 at 12:45
Good, now there are just a few more things to make sure your question is high quality: show anything you tried to solve the problem, the research effort you did, and a picture example of the select box in Firefox to be compared with the Chrome one. You can also read [how to best ask questions](https://stackoverflow.com/help/how-to-ask). — Anonymous, May 19 '15 at 12:55

score 1 · Answer 1 · answered May 19 '15 at 13:19

Trying to style select boxes is going to get you a lot of cross-compatibility trouble. You won't be able to fix this with just CSS.

I'm afraid you're going to need to write or find a custom select box. I had a very similar problem and ended up writing my own with Javascript. But that was a while ago - you might be able to find something open source.

CSS select option bug

1 Answers1