CSS disable text selection
Don't apply these properties to the whole body. Move them to a class and apply that class to the elements you want to disable select:
.disable-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
css override disable text selection
The solution. Please check out the jsfiddle link below for a working example.
HTML
<h2>Unselectable/Selectable</h2><br/>
<p>You can't select any of this text but you can select the text in the box below because a css rule has been made specifically to reenable text selection for that particular element.<br/><br/></p>
<input name="title" id='selectMe' type="textbox" />
CSS
* {padding:20px; user-select:none;}
#selectMe {user-select:text; border:1px solid #000; padding:10px;}
http://jsfiddle.net/7zwr0ody/1/
How do I disable text selection with CSS or JavaScript?
<div
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;">
Blabla
</div>
CSS or Javascript to disable text selection highlighting from CTRL + A
Possible Duplicate.
If you are allowed to use jquery, here is the answer you are looking for.
65 is ascii for 'A' and 97 for 'a' if you want to account for both.
$(function(){
$(document).keydown(function(objEvent) {
if (objEvent.ctrlKey) {
if ($(objEvent.target).not('input')){
if (objEvent.keyCode == 65 || objEvent.keyCode == 97) {
objEvent.preventDefault();
}
}
}
});
});
edit: modified based on your comment to allow for input.
edit 2: if you include jQuery UI you can use disableSelection() instead of disableTextSelect()
otherwise try this.
edit 3: Sorry, disableSelection() is deprecated in jQuery 1.9 see here.. Try this simple hack instead of disableSelection(). replace objEvent.disableTextSelect();
with objEvent.preventDefault();
above.
edit 4: made it a bit cleaner.
How to disable text selection on touch press?
Use this in your CSS..
-webkit-touch-callout: none; /* Safari */
-webkit-user-select: none; /* Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
Related Topics
CSS Drop Down Navigation, 3Rd Level Issue
What's the Best Way to Test Cross-Browser Compatibility
Css: How to Select Data Value Greater Than
Ie Flexible Box Model Not Working
Adding an Arrow on Both Sides of a Div Using CSS
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths
How to Set a Rotation Point for an Element in CSS
Default CSS Overriding Media Query
CSS - Calc() on Font-Size - Changing Font Size Based on Container Size
Angular 2 Material and Flex-Layout Alignment
Working with Zend Framework Flashmessenger and Jquery UI State Classes
Using Attribute Value of a Parent in a Child Using CSS3 Attr Function
Does @Import in CSS Result in Additional Http Requests