How to Make a Div Unselectable

How can I make a div unselectable?

You don't need Javascript for this (reference answer). Do this:

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

How to make certain text not selectable with CSS

The CSS below stops users from being able to select text.

-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

To target IE9 downwards the html attribute unselectable must be used instead:

<p unselectable="on">Test Text</p>

make text in div selectable, but make parent div unselectable (wordpress)

Prevent the ugly selection with `display: inline-block`

To prevent coloring outside the box when highlighting, use display: inline-block on your editable container. The selection will only apply to the divs text.

.content-area {  width: 300px;  height: 300px;  border: 1px solid;  box-sizing: border-box;  padding: 2px;  margin: 0 auto;}.selectme {  width: 150px;  height: 150px;  border: 1px solid;  box-sizing: border-box;  padding: 2px;  display: inline-block; /*add*/}

<div class="entry-content">  <div class="content-area">
    <div class="selectme">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac est risus. Nunc quis viverra lacus. Integer ut quam ac erat vulputate semper nec eget turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis posuere finibus. Aliquam ultrices ligula id pharetra tempus. Integer suscipit rutrum ex ut condimentum. Morbi non vulputate tellus, non euismod erat. Ut neque dui, pretium eu dolor in, rutrum viverra enim. Integer venenatis, neque et varius ultricies, lorem purus accumsan felis, sed egestas mauris lectus at massa. Morbi ut orci at est ultricies lacinia non sit amet eros. Pellentesque pulvinar metus ante, aliquam sollicitudin massa laoreet et.    </div>  </div></div>

make text selectable inside an unselectable div

Use for your h2 element

.unselectable h2{
 -moz-user-select: text;
 -khtml-user-select: text;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

See demo

How to make HTML Text unselectable

You can't do this with plain vanilla HTML, so JSF can't do much for you here as well.

If you're targeting decent browsers only, then just make use of CSS3:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<label class="unselectable">Unselectable label</label>

If you'd like to cover older browsers as well, then consider this JavaScript fallback:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

If you're already using jQuery, then here's another example which adds a new function disableSelection() to jQuery so that you can use it anywhere in your jQuery code:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });

            $(document).ready(function() {
                $('label').disableSelection();            
            });
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

How can I make MANY elements unselectable using jQuery or CSS?

$(".yourdiv").children().css({userSelect: 'none'});

That's in case you want to disable selection using the CSS user-select property. If not, the above can be easily generalized to other methods.

The above only selects direct children, to select all descendants, use the .find() method:

$(".yourdiv").find("*").css({userSelect: 'none'});

You can also do this using pure CSS:

.yourdiv * { /*this selects all elements that are children of yourdiv*/
    /*user-select: none rules*/
}

Or:

.yourdiv > * { /*this selects all elements that are direct descendants of yourdiv*/
    /*user-select: none rules*/
}

How can I make certain parts of my html not selectable?

If you want to just hide selection rectangle, you can use

element::selection { background: transparent }

and it's counterpart for Gecko

element::-moz-selection { background: transparent }

If you want to help your users select right text to copy to clipboard, you can move the element away. Usually browsers retain order of elements as they are defined in HTML when selecting. While it is not perfect solution, you can place the element's code in HTML either at the very beginning or very end of <body> tag. This way, if user selects something in the middle of the page, the element will be too "far away" to interfere.

How to Make a Div Unselectable

How can I make a div unselectable?

How to make certain text not selectable with CSS

make text in div selectable, but make parent div unselectable (wordpress)

Prevent the ugly selection with `display: inline-block`

make text selectable inside an unselectable div

How to make HTML Text unselectable

How can I make MANY elements unselectable using jQuery or CSS?

How can I make certain parts of my html not selectable?

Related Topics

Leave a reply

How can I make a div unselectable?

How to make certain text not selectable with CSS

make text in div selectable, but make parent div unselectable (wordpress)

Prevent the ugly selection with display: inline-block

make text selectable inside an unselectable div

How to make HTML Text unselectable

How can I make MANY elements unselectable using jQuery or CSS?

How can I make certain parts of my html not selectable?

Related Topics

Leave a reply

Prevent the ugly selection with `display: inline-block`