<select> dropdown a few pixels off

Question

Consider this Bootstrap bug report. Basically, the <select> dropdown is not aligned with the <select> element on Chrome and Safari (both tested only a Mac). @mdo thinks there there is no fix. I just want a second opinion.

Can the <select> dropdown be aligned with the base <select> element?

Answer 1

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.