I want to disable selecting text for all elements which a user cannot edit, for example text or images, but I still want to keep it for elements that you can type inside, like inputs or textareas.
To disable text selection, I use the following:
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
But as I said, this effects all elements, so I tried using this selector:
*[contenteditable=false]
instead of just *
But this doesn't work apparently for some reason, is there any selector in CSS to detect content-editable elements?
You are using an attribute selector, which will select on the presence of the contenteditable attribute.
What you are actually looking for is a way to not select elements which accept input, for which there is no shared selector. You would have to use :not and list all such tags (and possibly include the contenteditable attribute selector).
*:not(input):not(textarea):not([contenteditable=""]):not([contenteditable="true"]) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<input value="input" />
<hr />
<textarea>textarea</textarea>
<hr />
<p>paragraph</p>
<hr />
<p contenteditable>paragraph editable</p>
Related
I know one can use the below CSS to disable user text selection.
.unselectable{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
But when I have the following html:
<p>selectable text 1</p>
<p class="unselectable">unselectable text</p>
<p>selectable text 2</p>
Users can still copy the unselectable text by selecting from the very top of the page (selectable text 1) to the very bottom of the page (selectable text 2). Any ways to prevent that? Thanks.
Questions seems vague.
There is a difference between "Selection" and "Copying" on HTML pages.You can prevent "Selection" using CSS, but you can not prevent "Copying" using CSS. You need JS for that.
You just give it a div wrapper and define the id selector to do what you want Correct way to do a css wrapper
How would you cancel the webkit/moz/etc. value of none on something were the default isn't none? Here is an example:
CSS
.container {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.inside {
}
HTML
<div class="container">
<div class="inside">
</div>
</div>
What would you put in .container to negate the -webkit-user-select: none;? This is needed if you want everything inside formatted by the -webkit-whatever attribute except for a few certain things.
I don't really understand the question. If you want to remove default property of the browser - you can just override it by your css.
{
(-prefix-)user-select: none;
OR
(-prefix-)user-select: text;
OR
(-prefix-)user-select: all;
OR
(-prefix-)user-select: element;
}
If you want to negate that rule on someone's site - open console and add custom style. For instance
-webkit-user-select: all;
I want to create an element within a table which is not copyable (because of better readability).
In Firefox it is working correctly. If you select everything and copy it, the specific text element is not beeing copied.
Sadly in Chrome this doesn't work. Indeed the browser does not select the text, but copies it.
<td unselectable="on" id="unselectable">Test2</td>
#unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Example: http://jsfiddle.net/pXAeB/
Is there a solution to this problem?
Demo Fiddle
Add the below to your table element:
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'
To your table element. Note that for Chrome, most of the time just the inclusion of onselectstart='return false;' should suffice.
I have some source code in a <pre><code> with line numbers in a separate <div>. When the text is selected, the line numbers come with it, and are subsequently copied. Is there any way to prevent the line numbers from being a part of the selection, even if I select the elements above and below the source code block?
I'd like to avoid JavaScript for the benefit of people who browse with it off. (With JavaScript, I'd add a button to hide the line numbers).
unselectable="on" and the various vendor-specific user-select CSS properties did not work; the numbers are still selected and copied.
Give the element you want to prevent selection of an id.
Then put this in your CSS:
#id-name {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-moz-selection {
background: transparent;
}
::selection {
background: transparent;
}
Here an example text
Label: Some-text-here
How can i have it so when i triple click the line it tries to highlight only is Some-text-here rather then the full line? I could swear i seen it done before with css i just cant think of a way
<span style="float:left">Label</span><span style="float:left">Some-text-here</span>
JsFiddle.
If you use floats to position the texts next to each other they'll still be considered separate paragraphs and achieve the desired result.
<html>
<body>
<div style="float:left">Label:</div>
<div style="float:left">some text here</div>
</body>
</html>
This is somewhat of an extension to AXO's answer, but the perfect CSS rule would be user-select: contain;, which will prevent selections from crossing the element boundary. This value, however, is only supported in IE/Edge.
An interesting property though of user-select: all; and user-select: none; is that all will highlight the entire element with a single click, and all can be put inside none, creating a similar effect to contain if you put user-select: all; on the desired element within a parent element with user-select: none;. This is especially useful if you also have bare text in between the elements which you want to prevent being selected, but note that with this solution, the selection can still expand beyond the parent element, skipping over it, so it's not truly containing the selection.
Example:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.selectall {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
}
<p class="unselectable">Some extra text: <span class="selectall">ID-12345_678</span></p>
In some situations it may also be appropriate to exempt some parts of text from selection. The experimental user-select style can be used for that purpose, like so:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<span class='unselectable'>Label: </span>some text here
The simplest and most compatible approach that responds to single, double and triple clicks as expected is on the snippet below. See more here: user-select - CSS: Cascading Style Sheets | MDN
<span style="user-select: none">Label: </span><span style="user-select: text">Some-text-here</span>