0

I am trying to make some text readonly using in-line CSS. Both these methods work fine when testing using a standard html page.

Firefox syntax: 

<div style="-moz-user-select: none;">Some text</div>

Chrome Syntax: 

<div style="-webkit-user-select: none;">Some text</div>

However, I am trying to use this syntax in a text editor used within a CMS product. It works fine for firefox but not Chrome. I have also tried using the most basic approach which also does not work:

<div style="user-select: none;">Some text</div>

My question is, is there any other way of using in-line CSS (or HTML) to disable a block of text. Because we are using a free text editor we cant use any HTML input types.

Kevin Wing
  • 35
  • 5
  • 1
    just combine all 3 css rules... see [caniuse](http://caniuse.com/#search=user-select) - Chrome only supports the `webkit` prefixed version – Rhumborl Jun 13 '16 at 08:12
  • Have you tried the combination of all of them at one I mean `
    Some text
    `     – Peter Wilson Jun 13 '16 at 08:13
  • 4
    Possible duplicate of [CSS rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) – Rhumborl Jun 13 '16 at 08:15
  • Yes, tried all of these but to no avail. I was looking / hoping there might be an alternative. – Kevin Wing Jun 13 '16 at 08:29

1 Answers1

2

One could combine all three inline css as following:

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div>

This way it should work for all browsers you've mentioned. One could wrap this css into one class which is suggested in the linked post As explanation which is quoted from How to disable text selection highlighting using CSS?:

-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Chrome/Safari/Opera /
-khtml-user-select: none; / Konqueror /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge /
user-select: none; / Non-prefixed version, currently not supported by any browser */

One could also use some javascript properties to prevent selection:

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>
Community
  • 1
  • 1
Baklap4
  • 3,914
  • 2
  • 29
  • 56
  • Yes, I tried this initially, but it doesn't work. I just split it out in my question for simplicity. I was wondering if there is another property that I could try? – Kevin Wing Jun 13 '16 at 08:19
  • I have also seen this information you posted but I am wanting to know if there is another way of achieving the same thing either with in-line css or html. By the look of the responses there is not another way to do this. – Kevin Wing Jun 13 '16 at 08:25
  • I think there's no other way. Yet if you want an inputfield to be readonly one could add the readonly property: http://www.w3schools.com/tags/att_input_readonly.asp – Baklap4 Jun 13 '16 at 08:32
  • Because its a text editor it will not support html input types, thanks anyway. – Kevin Wing Jun 13 '16 at 08:34
  • One could add javascript to prevent selection too will add it to my answer. But seeing you can't add any properties i think this won't help as well.. – Baklap4 Jun 13 '16 at 08:37