Search code examples
cssselectionhighlighting

How to stop users from selecting unselectable elements FROM other elements?

I have some divs with images in them to form buttons.

I'm trying to make it all unselectable, but there are some other divs on my page which NEED to be selectable and from which I can still select the disabled divs.

The unselectable divs were disabled using your standard:

div#ControlsDiv {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div#ControlsDiv * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;                      
}
Solution

  • The technique you're trying to use seems a bit too easy, well guess what, it is: https://developer.mozilla.org/en-US/docs/CSS/user-select#Browser_compatibility .

    Based on that I'd immediately cease using it.

    Div show/hides are typically done in javascript, here's a link on how to do it in javascript & jQuery:

    Enable & Disable a Div and its elements in Javascript