As said in my comment already, the question Bad cursor in select/option, IE has an answer that suggest a rather complex JS solution.
Something a little simpler might be accomplished like this:
<span><select>
/* options here */
</select></span>
span {
position:relative;
z-index:0;
}
span:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:100px;
background:rgba(255, 0, 0, .25);
z-index:-1;
}
We put a span around the select element, and then position a pseudo-element underneath the select that has cursor:pointer set. That makes the cursor stay pointer even when the lower options are hovered. Edit: Actually, I used cursor:pointer in an earlier version, but then I realized that the cursor IE uses for the select options is a different one, and setting cursor doesn’t seem to be necessary at all – that the element the mouse pointer is over does not have any direct text content seems to be enough already.
(You might want to increase the height of the pseudo element when there’s more options.)
The background color is not needed, I put that in only so that it’s clearly visible where the pseudo element is located. Remove the background, and it’ll still work the same.
One little drawback: That pseudo element has to lay on top of the following content on the z-axis, otherwise the paragraph will “take over” again, and we have the same issue as before. Since usability might suffer from that (can’t start selecting text underneath that pseudo element, focusable elements under it won’t be clickable), here is another version that only makes that element visible when the select has focus:
<span>
<select>
/* options here */
</select>
<span></span>
</span>
span {
position:relative;
z-index:0;
}
span span {
display:none;
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:100px;
background:rgba(255, 0, 0, .25);
z-index:-1;
}
span select:focus + span {
display:block;
}
http://jsfiddle.net/CBroe/y4k35rqn/1/
This uses the adjacent sibling combinator to make the element only show up when the select has focus – that’s why I used an extra span element here, because otherwise I would have no “next sibling” to target from the focused select.
(Of course this doesn’t work so nicely when you absolutely need your select to have autofocus attribute set, why I removed it here. Maybe that’s a compromise you’re willing to make. Or maybe it doesn’t hurt if the element is displayed on page load, since the user will have to remove focus from the select before they can interact with other elements anyway. Your choice.)
