RobB wrote:
RobG wrote
You control the style of an option from the select element it's nested
inside.
Only in Internet Explorer, where 'windowed' elements (like listboxes)
have limited exposure. More advanced CSS browsers allow styling of
Options like any other element, although some layout aspects,
naturally, pertain to the containing list rather than any specific
option.
Not just Explorer, Safari is the same (but I haven't tested the latest
version). I expect all the Geko-based browsers support styles on
options, perhaps someone can comment on Opera.
Below is some test code, try changing the height of option 11 to 20em -
additional space is added below option 25 - similarly if you make it
500px as the OP attempted.
A bit of testing in Firefox shows that whilst small heights (say
equivalent to 2 to 5 lines) work fine, large heights are not reliable
and results vary if options have different heights specified. Note
also that the option height affects the select height - even though
only 3 rows are supposed to show, the select is greatly expanded - I
guess that the select height is set to size x the largest line height
which can result in an overly extended select.
Given that the OP didn't see any effect of "height" in their browser,
it's likely that s/he isn't using one of the "more advanced CSS
browsers". And given the majority of web surfers use IE, it's best not
to depend on features it doesn't have.
To top it off, the difficulty of controlling the size of the select
element itself if options are given different heights introduces
apparent unreliability in the UI that users may not understand.
But it's an issue worth discussing - thanks for bringing it up. :-)
Rob.
*Play code follows:*
<form action="">
<select name="aSelect"
style="font-size: 10pt; font-family: sans-serif;" size="3">
<option value="opt1">op tion 1
<option value="opt2">op tion 2
<option value="opt3">op tion 3
<option value="opt4">op tion 4
<option value="opt5">op tion 5
<option value="opt6">op tion 6
<option value="opt7">op tion 7
<option value="opt8"
style="font-family: courier; font-weight: bold;">option 8
<option value="opt9"
style="font-weight: bold; height: 20px;">option 9
<option value="opt10">o ption 10
<option value="opt11"
style="font-weight: bold; height: 2em;">option 11
<option value="opt12">o ption 12
<option value="opt13">o ption 13
<option value="opt14">o ption 14
<option value="opt15">o ption 15
<option value="opt16">o ption 16
<option value="opt17">o ption 17
<option value="opt18">o ption 18
<option value="opt19">o ption 19
<option value="opt20">o ption 20
<option value="opt21">o ption 21
<option value="opt22">o ption 22
<option value="opt23">o ption 23
<option value="opt24">o ption 24
<option value="opt25">o ption 25
</select><br>
<input type="reset"><b r><br>
<input type="text" cols="10" name="aNum">
Enter a number from 1 to 25 and that option will be selected<br>
<input type="button" value="click me" onclick="
var x = this.form.aNum. value;
if (x > 0 && x < 26) {
this.form.aSele ct.options[x - 1].selected='true '
} else {
alert('From 1 to 25 please, ' + x + ' is out of bounds');
}
">
</form>
