css override disable text selection

59
December 30, 2019, at 1:20 PM

Some people like to disable text selection for various reasons like keeping it on can make a page look ugly if someone hits CTRL A, or maybe you don't want people potentially leaving your site after highlighting text to search for on Google!

I globally disabled text selection on my site and wanted to re-enable it on specific elements as required. After some investigation, I found the solution.

All the code listed is tested and working on multiple browsers.

CSS example of globally disabling text selection.

* {user-select:none;}
Answer 1

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/

READ ALSO
printing table rows to different pages

printing table rows to different pages

I'm using angular to create an app to print certificates based on a predetermined templateI have a component to upload a CSV file and extract data from it and build a table with the related data to print a certificate

47
How to take action when user closes mobile browser window?

How to take action when user closes mobile browser window?

I've been using these two, which mostly work well:

50
Play sound every x seconds if selectbox is?

Play sound every x seconds if selectbox is?

I want to play a sound if a selectbox value = 'x':

64