Bad Cursor in Select/Option, Ie

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

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

Internet Explorer shows deny icon over select options if the options flow over a disabled input

This is a known open bug in Internet Explorer 11.

There's no good simple or non-hacky workaround besides getting rid of the not-allowed cursor everywhere by overriding Bootstrap's CSS.

Div wrapping an HTML select element in Internet Explorer

I discovered a solution to my issue. This jsfiddle shows it: http://jsfiddle.net/willjones/RTV8J/2/
Basically, I added a color to the div overlay and then set its transparency to be completely transparent.

markup += "<div id='divWrap_"+key+"' title='"+tooltip+"' style='position:absolute; left:0; right:0; top:0; bottom:0;  background-color:#ffffff; opacity:0;'></div>";

This worked for IE and didn't have any ill affects on firefox or chrome (which were already working). Thanks!

Why is it considered bad practice to use cursors in SQL Server?

Because cursors take up memory and create locks.

What you are really doing is attempting to force set-based technology into non-set based functionality. And, in all fairness, I should point out that cursors do have a use, but they are frowned upon because many folks who are not used to using set-based solutions use cursors instead of figuring out the set-based solution.

But, when you open a cursor, you are basically loading those rows into memory and locking them, creating potential blocks. Then, as you cycle through the cursor, you are making changes to other tables and still keeping all of the memory and locks of the cursor open.

All of which has the potential to cause performance issues for other users.

So, as a general rule, cursors are frowned upon. Especially if that's the first solution arrived at in solving a problem.

Internet Explorer and select tag problem

You should be able to detect if the situation is the one you want just with the values off the event. It is a little convoluted but it seems to work.

In the event handler of your outer div, do something like this:

<div onmouseover="if (isReal()) { toggle(); }"
     onmouseout="if (isReal()) { toggle(); }">
</div>

Then implement the isReal method:

function isReal() {
    var evt = window.event;
    if (!evt) {
        return true;
    }

    var el;
    if (evt.type === "mouseout") {
        el = evt.toElement;
    } else if (evt.type === "mouseover") {
        el = evt.fromElement;
    }
    if (!el) {
        return false;
    }
    while (el) {
        if (el === evt.srcElement) {
            return false;
        }
        el = el.parentNode;
    }
    return true;
}

Basically the isReal method just detects if the event was coming from within the div. If so, then it returns false which avoids calling the hide toggle.

HTML form readonly SELECT tag/input

You should keep the select element disabled but also add another hidden input with the same name and value.

If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.

Here is a demo:

$('#mainform').submit(function() {    $('#formdata_container').show();    $('#formdata').html($(this).serialize());    return false;});
$('#enableselect').click(function() {    $('#mainform input[name=animal]')        .attr("disabled", true);        $('#animal-select')        .attr('disabled', false)     .attr('name', 'animal');        $('#enableselect').hide();    return false;});

#formdata_container {    padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>    <form id="mainform">        <select id="animal-select" disabled="true">            <option value="cat" selected>Cat</option>            <option value="dog">Dog</option>            <option value="hamster">Hamster</option>        </select>        <input type="hidden" name="animal" value="cat"/>        <button id="enableselect">Enable</button>                <select name="color">            <option value="blue" selected>Blue</option>            <option value="green">Green</option>            <option value="red">Red</option>        </select>
        <input type="submit"/>    </form></div>
<div id="formdata_container" style="display:none">    <div>Submitted data:</div>    <div id="formdata">    </div></div>

How to change the cursor into a hand when a user hovers over a list item?

In light of the passage of time, as people have mentioned, you can now safely just use:

li { cursor: pointer; }

---

Related Topics