Chrome adds vertical padding to select options on different computers - html

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

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.

Answer 2

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:
Accessibly hide the original select.
Rebuild the select with custom markup (probably a definition list), that you style how you want.
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.
For mobile, trigger the opening of the native select menu, because that functionality is just about impossible to replicate. For example,
the iOS flipwheel.
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