dropdown with CSS only without JavaScript?](http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript) – dc5 Aug 16 '13 at 18:37

Question

You will NEVER style browser built-in tools the same across multiple browsers and across multiple OS.

I have been doing this a very long time and my best advise it to style as-best-as possible and reserve quirky css hacks for old IE browsers.

If you want to be super-anal about exact pixels, you need to not use the select html tag and instead use a ul tag. Then use css to list-style: none;

<ul id="my_selectbox">
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

Then, style the menu to look exactly how you want it to look.

So think of this as a menu instead of a selectbox.

Then use javascript to make the menu drop down like a select tag.

(but that sure is a lot of work for a few pixels isn't it?)

Remember, you will NEVER EVER write a CSS file that makes all browsers look identical. Just isn't how they are designed. If you have a manager that demands it, they need to learn how this stuff works.

further note: you will have to also use javascript to store a selection. I can write you a quick script that does this if you need it. Not sure how proficient you are with javascript.

score 1 · Accepted Answer · answered Aug 19 '13 at 20:24

You will NEVER style browser built-in tools the same across multiple browsers and across multiple OS.

I have been doing this a very long time and my best advise it to style as-best-as possible and reserve quirky css hacks for old IE browsers.

If you want to be super-anal about exact pixels, you need to not use the select html tag and instead use a ul tag. Then use css to list-style: none;

<ul id="my_selectbox">
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

Then, style the menu to look exactly how you want it to look.

So think of this as a menu instead of a selectbox.

Then use javascript to make the menu drop down like a select tag.

(but that sure is a lot of work for a few pixels isn't it?)

Remember, you will NEVER EVER write a CSS file that makes all browsers look identical. Just isn't how they are designed. If you have a manager that demands it, they need to learn how this stuff works.

further note: you will have to also use javascript to store a selection. I can write you a quick script that does this if you need it. Not sure how proficient you are with javascript.

score 0 · Answer 2 · answered Aug 19 '13 at 20:03

0

This additional style to the element may help:

-webkit-appearance: none;

answered Aug 19 '13 at 20:03

dmanexe

1,034
4
16
40

2 Answers2