Chrome adds a vertical pad to select options on different computers

Question

EDIT: See below screenshots:

I'm just wondering if anyone has encountered a similar problem. On my machine, Windows 8 and the latest version of Chrome, my window selection options look like I would expect in terms of vertical spacing. The developer next to me, also running Windows 8 with the same version of Chrome, the options for the selection window have 5 pixels at the top and bottom of the indentation. The code is located on our development server, so we get access to the same files.

Here jsfiddle reproduces the problem on another developer's machine: http://jsfiddle.net/3etfP/

And here is a test case (the same 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 helpful:

• Both versions of Windows 8.0 64bit
• Both desktop modes
• Both use cases of version 30.0.1599.101 m Google Chrome
• Using the following Chrome extensions:
  • URL alizer (both)
  • Google Hangouts (both)
  • Direct mail box for Gmail (me)
  • Any.do (another developer)
  • Quick notes (other developers)
  • Google Docs (both)

Please let me know if there are any details that I have missed.

thanks

Select with filling:

Choose as usual:

Answer 1

Scott

If this is something really important, you can mimic the behavior of select with a div and have better control. Do you think this cannot be a complement, did you try to set margin: 0 on the <option> elements?

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

Most elements have their own padding / margin in different browsers. I would recommend using CSS reset if you need a consistent design across all browsers (see here ). It may also be that you have Chrome. You both need to hold control and press + or - to make sure the scale is set to 100%.

Edit: I think you are sorry for this. See Chris Coyer 's Default Unpacking Article, especially the last part of the article, most of which is here.

What about the dropdown menu itself?

As is the case with what the selection shows upon activation. As far as I know, there is no way to style them in any browser. Not even bold or slanted. The closest to the style you can get is grouping them with. This is probably basically a user interface, but it could be a security thing too. You don’t want people to do complex things with fonts that don’t make it clear which option is selected.

What if you need full control over your design?

First try everything you can to make it not necessary. The default form elements are familiar and work well. Creating a drop-down menu matches the font and colors of your brand is usually not required and most likely unpleasant at best and bad UX at worst.

If you decide that this is an absolutely good idea to configure, you should use JavaScript to:

• Hide hidden choices.

• Restore your selection with customizable markup (possibly a list of definitions) that you draw as you want.

• Replicate all the features that are selected by default, including: keyboard events, such as the up and down arrow keys, and return to selection, scrolling through long lists, opening the up menu when selected against the bottom of the screen, to name a few.

• For mobile devices, initiate the opening of the main selection menu, since this function is almost impossible to play. For example, iOS.

• You might want to consider the desktop clickthrough style. You have a default choice, but when clicked, it opens its own drop-down menu (in place). When you select An option displays the user style again with the selected choice.

It is a lot of work and easy to screw up, so be careful.

Joshua

Answer 2

Being that it is the same OS and the same browser, I would look in the user style sheets:

• Windows: \ User Data \ Default \ User StyleSheets \ custom.css
• Linux: ~ / .config / chromium / Default Style / User StyleSheets / Custom.css
• (I know that you are both on Windows, just covering the reader base)

In the past, I used the item inspector to check for differences after displaying a page. The CSS property that always prevents me from filling in, etc., is the size of the window.