Bad cursor in select/option, IE

Question

I have a problem with bad cursor in options when the text is under that.

Normally, the option uses "default" cursor, but when eg. the paragraph is under option, in IE I see "text" cursor.

Code:

<form>
    <select>
        <option value=a selected="selected">First
        <option value=b>Second
        <option value=c>Third
        <option value=c>Fourth    
    </select>
    <p>text</p>
</form>

It´s in IE11 and I think the older ones makes the same.

I tried to set position: relative and z-index to select, option and paragraph, set cursor with important to select, option, but no solution, situation is the same.

Any idea?

I just found this question doing research on another one; and while the JS solution presented in bazzag’s answer might work, I found it rather complex, so I took an attempt at a simpler workaround using HTML & CSS only. If you’re reading this question and are interested, check it out here: http://stackoverflow.com/a/27911805/1427878 — CBroe, Jan 12 '15 at 22:37

bazzag · Answer 1 · 2014-06-03T01:30:23.623

IE does not honour the z-index of the select object, and applies the cursor attribute of any underlying object.

I handle this by changing the cursor attribute of all underlying objects to pointer at the onfocus event for the select object, and restore them at onblur event for the select object.

It is disappointing that IE does not handle this correctly, as do most other browsers.

Example code (as requested by DavidG):

In the this example we apply a class of 'underselect' to all elements that will be covered by the select dropdown (n.b. the dropdown does not always expand downwards, it can expand upwards).

On page load the initial cursor property of each element with the class 'underselect' is saved in a attribute 'ic' of that element.

The focus event of the select element is bound to a function that sets the cursor of all elements with the class 'underselect' to pointer.

The blur event of the select element is bound to a function that sets the cursor of all elements with the class 'underselect' to the initial value that was stored on page load.

Using jquery

$(function ()
{
  $("#select")
    .bind("focus", function(){ $(".underselect").each(function(){$(this).css("cursor", "pointer") });  })
    .bind("blur", function(){ $(".underselect").each(function (i){$(this).css("cursor", $(this).data("ic")); }) });

  $(".underselect").each(function () { $(this).data("ic", $(this).css("cursor")); });
});

Using javascript only we create the following functions:

function saveinitialcursor()
{
  gp = document.getElementsByClassName("underselect");
  for (var i = 0, l = gp.length; i < l; i++)
  {
    style = getComputedStyle(gp[i]);
    cursor = style.getPropertyValue("cursor");
    gp[i].setAttribute("ic", cursor);
  }
}

function selectfocus()
{
  gp = document.getElementsByClassName("underselect")
  for (var i = 0, l = gp.length; i < l; i++)
    gp[i].style.cursor = "pointer";
}

function selectblur()
{
  gp = document.getElementsByClassName("underselect")
  for (var i = 0, l = gp.length; i < l; i++)
    gp[i].style.cursor = gp[i].getAttribute("ic");
}

and bind them to the body and select opening tags:

<body onload="saveinitialcursor()" >

<select id="select" onblur="selectblur()" onfocus="selectfocus()" >

Can you post an example of how you do it? Perhaps on jsfiddle.net? — DavidG, May 29 '14 at 22:51

score -1 · Answer 2 · answered May 28 '14 at 07:10

Although you've closed the select tag with </select>, you still need to close your options. At the moment the browser reads everything after: <option value=a selected="selected"> as a single option.

Wrap all of your options with </option> - it should look like this:

<form>
    <select>
        <option value=a selected="selected">First</option>
        <option value=b>Second</option>
        <option value=c>Third</option>
        <option value=c>Fourth</option>
    </select>
    <p>text</p>
</form>

No, end option tag is optional, those HTML codes are same. You should try it before you write an answer ;) — , May 29 '14 at 10:11

Bad cursor in select/option, IE

2 Answers2

Linked