Chrome adds vertical padding to select options on different computers

Question

EDIT: See bottom for screen shots:

I'm just wondering if anyone has come across a similar issue. On my machine, Windows 8 and latest version of Chrome, my select box options all look the way I would expect in terms of vertical spacing. On the developer beside me, also running Windows 8 with the same version of Chrome, the select box options appear to have 5px to the top and bottom of padding. The code is on our development server so we're accessing the same files.

Here's a jsfiddle reproducing the issue on the other developer's machine: http://jsfiddle.net/3etfP/

And here's a test case (same a jsfiddle):

<style type="css">
    .select {
        padding: 3px;
        color: #000;
    }
</style>    

<div>
   <select name="testSelect" id="testSelect" class="select">
       <option value="-1">Select One</option>
       <option value="0">No</option>
       <option value="1">Yes</option>
   </select>
</div>

Some other details that may be of use:

• Both running Windows 8.0 64bit
• Both using Desktop mode
• Both using Version 30.0.1599.101 m of Google Chrome
• Using the following Chrome extensions:
  • URL-alizer (both)
  • Google Hangouts (both)
  • Right inbox for Gmail (me)
  • Any.do (other dev)
  • Quick Notes (other dev)
  • Google Docs (both)

Please let me know if there are any details I've missed.

Thanks

Select with padding:

Select appearing normally:

Answer 1

Scott,

If this is something really important, you could mimic the behavior of a select with a div and have better control. That being said it may not be padding, have you tried setting the margin: 0 on the <option> elements?

.select option {
  padding: 0;
  margin: 0;
} 

Most elements have their own padding/margin in different browser. I would recommend using a CSS reset if you want uniform design across all browsers (see here). It could also be that either of you have Chrome zoomed in. Both of you should hold control and press + or - to make sure the zoom is set to 100%.

Edit: I think you are in for it unfortunately. See Chris Coyier's article Dropdown Default Styling, especially the latter part of the article, most of which is quoted here.

What about the dropdown itself?

As in, the thing that shows the choices when activated. As far as I know, there is no way to style these in any browser. Not even bold or italic. The closest thing to style you can get is grouping them by using . This is probably mostly a UI thing, but it might be a security thing too. You wouldn't want people doing tricky things with fonts that make it unclear what option is selected.

What if you want complete design control?

First, try everything you can to make that not necessary. Default form elements are familiar and work well. Making a dropdown menu match the font and colors of your brand isn't usually necessary and is more likely obnoxious at best and bad UX at worst.

If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript to:

1. Accessibly hide the original select.

2. Rebuild the select with custom markup (probably a definition list), that you style how you want.

3. Replicate all the functionality that default selects have, which include: keyboard events like up and down arrow keys and return to select, scrolling of long lists, opening the menu upwards when select is against bottom of screen, to name a few.

4. For mobile, trigger the opening of the native select menu, because that functionality is just about impossible to replicate. For example, the iOS flipwheel.

5. You might want to consider a "clickthrough" style for desktop as well. Have the select be custom styled by default, but when you click it, it opens the native dropdown menu (in place). When you select an option it displays the custom styling again with the choice shown.

It's a lot of work and easy to screw up, so beware.

Joshua

Answer 2

Being that it's the same OS and same browser I would look into the user stylesheets:

• Windows: \User Data\Default\User StyleSheets\custom.css
• Linux: ~/.config/chromium/Default/User StyleSheets/Custom.css
• (I know you're both on Windows, just covering bases for readers)

Past that I would use the element inspector to check for differences after the page is rendered. A CSS property that always gets in my way with padding, etc., is box-sizing.