Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS?

Question

Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS? This seems to only happen in IE11.

Here is a jsFiddle showing my issue: http://jsfiddle.net/6mzhgmvj/.

The accompanying code is as follows:

<!DOCTYPE html>
<html>
<body>

<select autofocus>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<p><strong>Note:</strong> The autofocus attribute of the select tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>

</body>
</html>

Repro Steps:

Expand dropdown menu.
Hover over options.
When hovering over options 3 and 4, the cursor rapidly changes between 'default' and 'text' because there is a paragraph element behind it when expanded.

Any help on this would be great.

Your code works fine for me on Chrome latest, Windows 8.1, you can try setting z-index property for the dropdown — Jayant Varshney, Jan 12 '15 at 21:34
Looks like this is definitely an IE issue (unless someone can test. It may actually be a system issue). It works as expected on Mac in Chrome, FF, Safari, Opera, and even Camino (all I can test right now). It would make sense that it should work the way you're expecting and I see nothing wrong with your code that should cause that. — Joseph Marikle, Jan 12 '15 at 21:43
Apparently, IE does not support any mouse or keyboard events associated with option tags. As you can see here http://msdn.microsoft.com/en-us/library/ms535877(VS.85).aspx — Justin Breiland, Jan 12 '15 at 21:55
Similar question here: http://stackoverflow.com/questions/23648834/bad-cursor-in-select-option-ie One answer suggest a rather complex JS solution to set the pointer cursor to all underlying elements when the `select` has focus … whether that’s worth the effort for such a minor issue, is for you to decide. — CBroe, Jan 12 '15 at 22:03
Only IE issue, where browser doesn't honor any css values for option tag other than background-color and color. hence we can't set z-index in option tag neither setting it to select tag will work. See more for styling option tag related issue here https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select — Namish, Jun 06 '17 at 09:07

score 4 · Accepted Answer · edited May 23 '17 at 11:51

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.)

One more thing I discovered in my fiddle: When one of the last two options (Open or Audi) is selected, on next focus IE opens the options list _upwards_ – and then the same unwanted effect happens again (in the original fiddles because of the text elements in the iframe above). Now if you have actual text content within the same window there (say, another paragraph same as below), you can fight that by extending the `span` element in an upwards direction as well, see edited fiddle: http://jsfiddle.net/CBroe/y4k35rqn/2/ — CBroe, Jan 12 '15 at 22:33
Thanks for this! I might be able to take this solution and make some tweaks to fit my actual use case. Compared to the JS solution, this is a lot easier to consume. — Brandon P., Jan 13 '15 at 06:30

score 0 · Answer 2 · answered Jan 12 '15 at 21:53

0

This is definitely an IE issue. While there are a lot of solutions to make autofocus work in IE (in stackoverflow itself), none of them help here where the main issue is select dropdown coming on top of the paragraph tag.

Heres a hack which may help you though :D

p {
    cursor: default;
}

Note this is just a hack and doesn't fix the fundamental issue. I want to know a better solution too.

answered Jan 12 '15 at 21:53

Bizarre

21
4

Thanks! This was going to be my fallback plan. The only problem is that there were so many elements on multiple pages that were being overlapped, so the hack(s) would have become a maintenance nightmare. – Brandon P. Jan 13 '15 at 06:31

Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS?

2 Answers2

Linked