CSS Text Selection override for Text Box

Question

I have a layout as follows:

HTML

<div class="Non-Select">
  <div>Title</div>
  <div><input name="title" type="textbox" /></div>
</div>

CSS:

Non-Select {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}

I want to be able to override the Non-Select class so that I can select text in the Text Box.

Any suggestions would be greatly appreciated.

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

To make text unselectable one needs to understand that there are two methods. If we need Opera and Internet Explorer prior to version 10 (which is in most of the cases positive)) ) - we need to use the unselectable attribute with the value of on.

What is important to notice here that if we set this attribute to the parent wrapper - .Non-Select in this case - the child-elements' text can still be selected - open this fiddle in opera or IE up to 9 to check. So we need to add this attribute to every single element that should not be selected (possibly dynamically via javascript if there are many (or unknown number) of possible child elements).

To disable other browsers' selection we may use the css3 user-select property. A cool way of adding this css will be via attribute selector like so:

[unselectable="on"]{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

Thus - the text on any element with this attribute cannot be selected in most of the popular browsers.

The second way is shorter. If we don't need IE or Opera - your code must undergo a small change for it to work in Firefox, Chrome and IE10.

.Non-Select {
    -webkit-user-select: none;
    -khtml-user-select: none; 
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none; 
}
.Non-Select input {
    -webkit-user-select: text;
    -khtml-user-select: text; 
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text; 
}

Pay attention to the non-standart -moz-none value I added. If we read carefully about this property on MDN we will see that Mozilla introduced this non-standart version to enable selection of child elements. A live example of the second method can be seen here: - http://jsfiddle.net/jxnEb/5/

Edit: There has been a similar question on selection. Pay attention to the accepted answer where the author wrote a function to add the unselectable attribute recursively to all the child-elements. (in your case - input should be filtered of course).

edited May 23 '17 at 10:34

Community

1
1

answered Aug 09 '12 at 09:11

skip405

6,119
2
25
28

@SJacks any details? – skip405 Jan 04 '20 at 10:37
Sorry, I should have specified that what you wrote is actually partially correct but the solution is a lot more simple than is being presented: https://stackoverflow.com/questions/59520475/css-override-disable-text-selection/59520476#59520476 – SJacks Jan 05 '20 at 07:18
@SJacks I seem to struggle to find any difference between this answer and the one from your link. The fact that in 2012 we needed a couple of vendor prefixes doesn't count, It's still `user-select: none`. Why is it partially correct? – skip405 Jan 09 '20 at 07:13
Because of the vendor fixes, they are not semantic and are no longer required. – SJacks Jan 10 '20 at 12:52
@SJacks your comment is (to put it mildly) incorrect. Firstly, CSS properties cannot be semantic or unsemantic, this adjective is not for CSS. Secondly, we _do_ need some vendor prefixes (even though it's 2020), take a [look](https://caniuse.com/#feat=mdn-css_properties_user-select) at caniuse. The only thing that we can remove from my answer is the `khtml` one. – skip405 Jan 13 '20 at 14:47
You're wrong. Whether you agree or not the fact is CSS is a language and thus it can be written in a semantic or unsemantic manner. Try W3C's CSS validator (Jigsaw) which reveals semantic errors. In this case user-select is the only required value. I have tested this myself on multiple browsers and devices including mobile and desktop. – SJacks Jan 13 '20 at 19:57
@SJacks one last time - there's nothing unsemantic in a vendor prefix. They've been the _recommended_ way to implement features for browsers without awaiting for the official spec. Secondly (about your testing) if you can please open [your fiddle](http://jsfiddle.net/7zwr0ody/1/) in Edge to confirm that the text is unselectable? It's your fiddle not mine :) lol. This should conclude our conversation on this – skip405 Jan 14 '20 at 14:05
Paste your code here: https://jigsaw.w3.org/css-validator/validator the only valid CSS is user-select:text; As for Edge... It's not anywhere near a significant share of the market and if that's your argument, it's a poor one. Have a productive and semantic day! – SJacks Jan 14 '20 at 21:47
@SJacks You're punching above your weight my friend :) a) do you have anything to prove your claim that `W3C's CSS validator (Jigsaw) which reveals semantic errors`? Cause I don't think this is true. Validity and semantics are like chalk and cheese. b) This [thread](https://lists.w3.org/Archives/Public/www-validator-css/2005Dec/0012.html) explains why the validator marks vendor prefixes as errors. Please read and provide an answer to me in your next comment at to _why_. Don't worry, the thread is 7 short emails long. – skip405 Jan 16 '20 at 07:50
"You're punching above your weight" LOL okay ;) Safari is worthy of consideration due to the widespread use of Apple products, particularly the iPhone, however, Edge is not. As for IE, it's nearly dead: ask yourself where the limit lies in cross platform support, how old or how underused does the software or hardware have to be in order for you to drop support for it. There have to be limits. – SJacks Jan 16 '20 at 16:01

score 1 · Answer 2 · answered Aug 09 '12 at 08:05

1

You can override your default behaviour for inputs within Non-Select.

.Non-Select{
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}
.Non-Select input{
  user-select: text; 
  -khtml-user-select: text; 
  -moz-user-select: text;
}

answered Aug 09 '12 at 08:05

Carlos Ouro

565
6
16

Did you happen to check what you suggest? – skip405 Aug 09 '12 at 08:20
Thank you very much for this. I globally disabled text selection and wanted to re-enable it on some specific elements. This should be the accepted answer as it is the only one which works. – SJacks Dec 29 '19 at 14:19

score 0 · Answer 3 · answered Aug 09 '12 at 07:46

0

use this CSS

.Non-Select input {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}

answered Aug 09 '12 at 07:46

Mayuresh

1,613
1
11
18

Sorry, I meant I want to be able to make the text in the text box selectable. – William Troup Aug 09 '12 at 07:51

score 0 · Answer 4 · answered Aug 09 '12 at 08:06

Just modify your CSS like this:

.Non-Select {
   -webkit-user-select: none;
    -khtml-user-select: none; 
      -moz-user-select: none;
        -o-user-select: none;
           user-select: none; 
}

You forgot a dot before class name.

That will be enough to achieve desired result.

CSS Text Selection override for Text Box

4 Answers4