12

This seems really simple but I can't even find something telling me that it's not possible, let alone how to do it.

I've got a page that uses expanded/multiple selects, and I can't seem to control the height of the options. They look really snug. In Firefox, CSS values for option in height and line-height both seem to have the desired effect, as does padding, but not in Chrome 8 or Safari 5. Am I missing something? Here's a sample of my code. I've put in anything that could affect the option in case there's some overriding value that I'm missing.

body, input, select, checkbox { 
  font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif; 
  font-size: 15px; 
  font-weight:200; 
  line-height: 18px; 
}

input, select { 
  color:#4c2a18; 
  border: 1px solid #cfc8b4; 
  background-color:#ffffff; 
  -moz-border-radius: 0; 
  -webkit-border-radius: 0; 
  border-radius: 0;
  margin:0; 
}

option { 
  height: 35px; 
  padding:5px; 
  line-height: 35px; 
}
<select size="5">
  <option value="">This is option 1</option>
  <option value="">Option 2</option>
  <option value="">Just trying to show how the line height thing works.</option>
</select>

You can view it in action here.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Ben Saufley
  • 3,259
  • 5
  • 27
  • 42
  • 1
    I'm not a 100% sure, but I think this is likely impossible in Chrome. The `select` element (and, of course, its children `option` elements) are under the control of the underlying OS, rather than the browser. That it works at all in other browsers surprises me. You could use a styled, and JavaScript controlled, `ul` (or `ol`) to achieve a styled select-type element. – David Thomas Jan 20 '11 at 15:23
  • I can style the `select` element in Chrome, and add `padding` and such there. – Ben Saufley Jan 20 '11 at 15:25
  • I always forget that 'Enter' submits the comment. Anyway I've considered the `ul` route but it just seems unnecessary when the `select` does a perfectly adequate job, except for cramming all the things too close together. I'm trying to figure out why it doesn't always look crammed - if there's something farther up the hierarchy that's causing this, or what. – Ben Saufley Jan 20 '11 at 15:26

1 Answers1

28

This is not possible in Chrome, according to the electric toolbox:

Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.

mVChr
  • 49,587
  • 11
  • 107
  • 104
  • @Ben Saufley, if you want a customized form control, you'll need to either: 1. roll your own, b. use a pre-built lib, iii. just live with the default. – zzzzBov Jan 20 '11 at 16:46
  • 1
    @zzzzBov - So I've heard. Though I can do pretty much everything I need to without involving JS. This was a small aesthetic problem I was hoping to solve simply. – Ben Saufley Jan 20 '11 at 16:52
  • 4
    @Ben Saufley, Select elements tend not to be used as often as they're a bit ugly, you can perform the same choice using radio buttons, and with a little bit of styling you can turn a set of radio buttons/labels into something that works very similarly to a select element, while actually being skinnable. – zzzzBov Jan 20 '11 at 17:14
  • @zzzzBov I hadn't thought of that. That's an interesting idea. Thanks! – Ben Saufley Jan 20 '11 at 17:18
  • @Ben Saufley, and if you need "multiselect" use checkboxes instead. – zzzzBov Jan 20 '11 at 17:35
  • 1
    I almost didn't upvote this because of how stupid it is to not support styling the option element. Even though it's bad news, thanks for informing us. Now I need to go and make an entirely separate control to work with something I'm trying to do in AngularJS just so I can style it. Anyway... +1! – My Stack Overfloweth Dec 02 '15 at 23:28