user select none not working safari

• Web Development

How to Fix Issues With CSS "user-select: none" Not Working?

• Daniyal Hamid
• 21 Dec, 2022

If in CSS, " user-select: none " is not working for you, then you could try the following:

• Check Browser Compatibility ;
• Check Child's user-select Value ;
• Disable pointer-events .

If none of these help, then you might want to check for browser-specific issues. For example, due to a bug in Chrome v62 , user-select might not work as expected. In such cases, you could, perhaps, use a JavaScript polyfill instead.

Check Browser Compatibility

If the CSS user-select property is not working for you, then you might want to check if the browsers you're supporting, actually support user-select: none .

Some browsers might require a vendor-specific prefix to make the user-select property work. Therefore, based on the browsers you wish to support, make sure that you have added the necessary vendor prefixes, for example, like so:

Check Child's user-select Value

If a child element does not have a user-select property set explicitly, then it would default to user-select: auto , which would determine the value for the child in the following way:

• On ::before and ::after pseudo elements, the used value is none ;
• On editable elements, the used value is contain ;
• If parent is set to either all or none , then the child uses the same value as the parent;
• If none of the above is true, then the used value is text .

If this is the source of your issue, then you can explicitly set the user-select property on the child element, for example, like so:

In this case, the <div> element (and its contents) will be selectable, except for the <p> element because its user-select property is set to none .

Conversely, it could also be that the child element already has an explicit value set for the user-select property, which could be causing it to behave differently than the parent (for example, when you are expecting it to inherit none from the parent).

Disable pointer-events

You could try setting pointer-events: none on the element to disable all pointer events on it. This would prevent the user from interacting with the element in any way (including, clicking on it or selecting its contents). For example:

This post was published 21 Dec, 2022 by Daniyal Hamid . Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post .

user-select

The user-select property in CSS controls how the text in an element is allowed to be selected. For example, it can be used to make text unselectable.

This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users (not have them accidentally text-select useless things, like icons or images). However it’s a bit buggy. Firefox enforces the fact that any text matching that selector cannot be copied. WebKit still allows the text to be copied if you select elements around it.

You can also use this to enforce that an entire element gets selection:

Here’s some demos of those:

See the Pen user-select demo by Chris Coyier ( @chriscoyier ) on CodePen .

There was no spec for this property for quite a while, but now is covered under CSS Basic User Interface Module Level 4 .

The default value is auto , which makes selection happen normally as you expect. “Normally” is a bit complicated. It’s worth quoting from the spec here:

On the ::before and ::after pseudo elements, the computed value is none If the element is an editable element , the computed value is contain Otherwise, if the computed value of user-select on the parent of this element is all , the computed value is all Otherwise, if the computed value of user-select on the parent of this element is none , the computed value is none Otherwise, the computed value is text

In other words, it intelligently cascades and resets to a sensical state. It looks like maybe this feature could be used to make pseudo elements selectable, but no final word yet.

Older/Proprietary

Firefox supports -moz-none , which is just like none except that it means sub-elements can override the cascade and become selectable again with -moz-user-select: text; As of Firefox 21, none behaves like -moz-none .

Internet Explorer also supports a so-far-proprietary value, element , in which you can select text inside the element but the selection will stop at the bounds of that element.

More Information

• User Select interoperability

Browser Support

This is specifically for -*-user-select: none;

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Unfortunately it doesn’t seem to work for android devices… any advice ?

hi, did you find the solution for the Android issue ?

It seems that’s related the device , since i tried on a Samsug galaxy Note 2 , and the issue isn’t there, however in Asus & Samsung Galaxy Tab Note 2 , the issue’s here .

Found a weird behavior: It causes input text fields not to receive text…

Seems like “user-select:none” does not work in Android Browser prior to version 4.1 But i’ve not found any official proof for that. I’ve tested this example http://jsfiddle.net/u88wbh10/4/ in different versions of Android Browser: Samsung mobile device with android os 4.1.2 – works. SE Xperia mobile device with android os 4.0.4 – does’t work. Both android versions have the same version of webkit built-in. There are several threads on the stackoverflow pointing to this issue. For example: http://stackoverflow.com/questions/5107651/android-disable-text-selection-in-a-webview Although the MDN & canisue.com shows the support for “user-select” from the android 2.1: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Browser_compatibility http://caniuse.com/#search=user-select Anyone experienced the same problem?

But you can use pointer-events: none .

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

Thanks for this trick. You forgot to add -ms-user-select into demo, didn’t You?

Although Firefox, Chrome and Safari support it all through, the implementations are slightly different, in Firefox, when one does mousedown on the given element and drags along it to copy text, the cursor remains default type (i.e if it was originally cross-hair it remains cross-hair during the drag, if it was pointer, it remains pointer), whereas in Chrome and Safari, the cursor turns crosshair during the drag, whatever be the original cursor type declaration for that element.

It’s worth noting that you can make areas of text selectable again using:

Thanks Chuck.. Really helped a lot…

Though Chrome filters text boxes by default, Mozilla affects text boxes also when we use

Also worth noting, -webkit-user-select causes major hang ups in the current version of safari. After including it on a basic page I was able to make safari freeze by clicking the mouse 6 times in a row.

Update to my last statement. This only becomes noticeable when safari has around 7000 lines of text on a webpage to render

In Firefox, this property value affects the element’s children and therefore you will not be able to select them either. Even manually overriding the children’s CSS properties will not allow you to select them.

If you wish to manually override the children’s selection, then you must use the property value “-moz-none” instead of “none”.

Wk of Angmar: THANK YOU!!!

Thank-you! Just saved me a lot of frustration.

http://caniuse.com/#feat=user-select-none

I’m curious in an app setting, would it be frowned upon to set this to none universally, and then enable it for areas that makes sense to be selectable (a body of copy, copy/paste interfaces, etc…) For me, it seems it could make the experience a little more seamless if someone Cmd/Ctrl-A’s inside the page, or drags too long unintentionally.

I have on the same line selectable and unselectable text.

(terminal commands, with comments at the end of some line)

The comments are indeed unselectable, if I try to select them. Thanks for the trick!

BUT, when I select several lines (the commands) it DOES highlight also the unselectable parts (the comments), althgough the comments are actually NOT selected (as we see when copy/pasting). It is a visual glitch, which is misleading for the user.

Does anybody have any trick to disable highlighting of unselectable text?

Opera 15 will support this feature, for now with the -webkit prefix.

-webkit-user-select: none;

This breaks password inputs in the version 6.0.2 of Safari.

A workaround is to define a single line CSS, applied to your password inputs

.safariPasswordWorkaround { -webkit-user-select: all; }

does this work in PDF?

what if, I want to make the text really unselectable (not even by source)? Actually I want to display a very long code but I want it to be unselectable, so that other users are unable to copy it. they can just ‘view’ it.

what could be the possible solution(s)?

Put it in a gif. That’s the easy solution. Won’t stop anyone with free time and a text editor from copying it though.

If you’re still getting a user select highlight on Android devices, or anywhere, you might need -webkit-tap-highlight-color: rgba(0,0,0,0); as well.

I like to maintain the highest level of support across browsers, platforms, and versions as possible and have pieced together this bit of code which I use whenever I need to achieve this affect…

1-webkit-touch-callout: none;-webkit-user-select: none;2-khtml-user-drag: none;-khtml-user-select: none;3-moz-user-select: none;-moz-user-select:-moz-none;-ms-user-select: none;4user-select: none;

1The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up. 2The -khtml prefix predates the -webkit prefix and provides support for Safari 2.0- 3The -moz prefix is defined twice with the value none and the value -moz-none on purpose. Using -moz-none rather than none prevents elements and sub-elements from being selectable. However some older browsers like Netscape won’t recognize moz-none so it’s still necessary to define none for them. 4**Don’t forget, non-prefixed property should be last in line.

I would prefer the surfer hone their skills with a mouse to cluttering up the already obfuscatiousness of CSSx-de-jour. Just sayin… :-)

I have pages with a lot of user-created text. Users often want to “select all” to paste into email, etc. The text they want is across several long “contenteditables” (think Google Doc but multiple docs in on eweb page). “Select all” makes the most sense, since select and drag makes you have to scroll a lot and also the selection stops when you reach the boundary of the contenteditable.

But “select all” also selects the “chrome” of the page (nav, etc.) which they don’t want.

You’d think this “user-select” would be what I want, but the way it works (FF at least) is that “select all” selects the user-select:none text.

I suppose there is a danger of making it too easy for the devs to make it too hard for users to select text. Still, it might be a nice thing if we could figure it out.

I have a UI with rows of content that have “buttons” in them too, and I was trying to prevent the buttons from having their text copied too, when people tried to copy the content. What I did was change the text I didn’t want selected from being part of the element to being created by a css :before pseudoelement. It worked like a charm!

Hey gang, CSS ‘pointer-select: none;’ has exactly the same behavior, where selection of anything before or after ‘select none’ tag content enables selection of all content in the selection area. There is a cmd processing hack here (somewhere), something CSS-Tricks should be able to bring to light: the parent selection must be made to react in a certain way to the child ‘select none’ element. Prettify.js (“google.code.prettify”) handles this sort of focus management nicely. HTML/CSS workaround?

… pre { counter-reset: line; white-space: pre-wrap; } code { counter-increment: line; } pre code:before { content: counter(line); margin-right: 3rem; pointer-events: none; } pre code:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

Okay, as an example of cmd influence on coding, consider this code to reveal carat behavior (sorry, limitations here, you’ll have to close the obvious spaces in following code in your device preview)

… PRE and CODE cannot display literal carat symbols. Element tags for carats are hand-coded &lt ; ‘<‘ left carat and &gt ; ‘>’ right carat. …

The display reflex for select-none behavior is almost identical. Attach pointer-events to parent PRE, and attach user-select to child CODE (each line a separate CODE tag) and parent selection happens with outside drag in/across. Cmd-based interference, with nothing outside visibly selected, paste selection reveals inclusion of last pre-PRE character invisibly included in copied selection. Behavior of counter and code is as not selectable from inside PRE or attributed CODE counter. Therefore, the google prettify.js uses attribution in some way as our missing hack would. Which will be another blog post, here at CSS-Tricks.

Basically a DRM feature, I’ve just found a site abusing this. All the crud on the page can be selected, but nothing in the article. I want to view a bit of the source to see how their web2.0 malware works, but found they are hindering that.

FF, and all the modern browsers, are just proprietary application delivery platforms. And for that reason they suck in ways that Windows does. The user should be in control, sites should not be able to do stupid things without the user specifically allowing it.

There are tons of valid non-DRM use cases for this feature. In my personal case building a custom WYSIWYG editor. Being able to control user selection is an application level feature needed for the types of rich apps being built today.

Unfortunately, there it still isn’t standardized to a high degree across browsers. Especially when contentEditable becomes involved.

-webkit-user-select: all; /* Chrome 49+ */

…should be…

-webkit-user-select: all; /* Chrome 50+ */

Sorry, I meant Chrome 53+, and Opera 40.

If you’re using Cordova and iOS you will need to do additional work to suppress the text selection bubble. http://stackoverflow.com/questions/32812308/ios-cordova-long-press-shows-text-select-magnifying-glass-even-with-text-selecti

Thank you! I know its been a while since this was wrote but I turned off copy and paste because of other sites stealing my work and claiming it was theirs. But then people couldn’t copy links I was giving them and blogger changed its look and I didn’t know how to turn it off. With one word they can do it again :)

This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users

Turns out it’s also useful for Facebook who use it as a #darkpattern to block copy/pasting of Facebook posts when not logged in >:(

I’m trying to make some text unselectable and un-copy/pastable. Adding user-select: none; does indeed accomplish that when I test with Chrome and a plain text editor (Atom). But when I paste into Microsoft Word, I get all the text I did not want to select/copy/paste. I’m not familiar with how the clipboard works but this seems odd. Is there a way to prevent text from being copied from the browser and pasted in Microsoft Word?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How do websites block selecting text and how do I unblock that?

There's a website ( example ) that somehow blocks selecting text. Also it blocks Ctrl + A to select everything, there is also no “Copy” in the popup menu.

What I have tried:

Some sites use JavaScript to block selection. So I disabled all JavaScript sources in no-script addon in Firefox. I tried the same site in Google Chrome with the Script Safe addon. Made sure that everything is blocked, still can’t select text. Mousepointer remains an arrow and not a text cursor also on the whole site.

Used about:config to disable JavaScript completely in Firefox. Still no effect.

I read that some sites use DIVs with the style display:block so I used Inspect to examine the styles of the site. There is not one mention of "block" on the whole website, not in embedded CSS nor in object style=-attributes.

The text is not an image or flash or some HTML5 canvas ect. Everything is within DIV and P tags but no style was found that might block the text selection.

How can the website still block any selection of text? Not to mention why browsers support such behaviours at all. I just want to use a selected word or sentence and want to search google for it using right mouse click. It’s pretty annoying when a website does such things and forces me to type technical terms and names into google by hand. It disturbs my workflow.

• google-chrome

• 13 "How do websites block marking of text" - They set style.userSelect to none . –  user766703 Jan 5, 2018 at 9:52
• 6 @Xen2050 Mostly I don't care about copying text. I just love the ability to mark phrases and terms and search for it on Google with just a click of the mouse (doubleclick word, rightclick "Search Google..."). I could go into the source (if it's clean source at all) and scan for the word, copy it, paste in Google but well... as said this is just an annoyance. Some1 who wants to copy your website text can do it anyhow but someone who just wants a comfortable workflow gets hindered. –  user6329530 Jan 5, 2018 at 13:47
• 151 Can we just take a moment and sympathize for all the delusional web developers out there who think this is a good security measure? –  MCMastery Jan 5, 2018 at 15:17
• 43 @MCMastery Or worse, the developers who know it's terrible but are told they have to do it anyway. Most of the time they are worried about people stealing content. Then you've got sites like SO who are getting scraped/stolen from all the time... but commercially viable. Turns out alienating your userbase is bad for business. Who would have thought?! –  corsiKa Jan 5, 2018 at 20:39
• 4 @MCMastery - the goal, as usual, is not to be faster than the dinosaur. The goal is to be faster than the dude next to you. Just as a goal of a lock isn't to defeat a burglar, it's to introduce more friction for them to go burgle someone else. Or in other words, the goal of the measure is not to introduce bulletproof security; it's to introduce enough friction to (a) deter casual copier and (b) make a less casual copier more interested in less-work-required-to-copy alternative sites. –  DVK Jan 7, 2018 at 21:12

16 Answers 16

https://www.angst-panik-hilfe.de/angst-panik.css shows:

So, that effect applies to the entire BODY tag.

Documentation on this CSS: Mozilla Developer Site: user-select .

You could probably override this by removing the style in Developer Tools (press F12 in Firefox or Chrome) - you may even be able to create a JavaScript applet that, after investing the time to set this up, can remove that style with less instant effort on your part (which may be a time saver if you plan to visit the site multiple times).

I'd also like to add this note: This might not be the only way to have at least some of that effect. Another possible way could be to have an invisible DIV cover the DIV that has the text. That way, the mouse cursor would not turn into the I-beam (text cursor) because the cursor would be based on the content of the top-most DIV . ( Ctrl - A would probably cover that text, though.)

It's pretty annoying when a website does such things and forces me to type technical terms and names into google by hand. It disturbs my workflow.

Amen! Upon seeing this, I'm disappointed at the existence of such a CSS style being implemented by the major browsers. Such things are pretty annoying, indeed!

• 67 The user-select CSS style is pretty helpful when applied responsibly. For instance, if you want (especially older) users on a touchscreen clicking on buttons near label text, you don't want them to mark the label text instead of clicking the button. –  phihag Jan 5, 2018 at 14:00
• 14 What do you mean "by default"? This setting is only enabled if the website specifically enables it, that doesn't sound like "by default" to me. There will always be features that can be misused by bad web designers, there's not much you can do to prevent that without negatively affecting those who do have a legitimate reason to use those features... –  Sean Burton Jan 5, 2018 at 15:18
• 14 @SeanT Again, if the browser exists to serve the person looking at webpages, then its job is to respond to what the web server sends however the user tells it to. If the user tells it to mute the page, or disallow pop-ups, or copy text, then the browser should do so. –  Acccumulation Jan 5, 2018 at 16:14
• 8 No browser user is going to go to the bother of configuring their browser to explicitly enable a feature like this one, if it's not enabled by default then it's essentially useless and might as well not be implemented at all. And if you are suggesting that every feature must be explicitly enabled by the user, then where do you draw the line? Must the user enable the "images" feature before a website can display images? Must all browsers basically be Lynx by default until the user enables all the features they want? –  Sean Burton Jan 5, 2018 at 16:16
• 14 @Acccumulation The user-select: none feature is used all over the place to maintain the style of a webpage e.g, stopping an ugly blue background when selecting an option from drop down lists. You just don't notice because it's being implemented correctly. The problem here is that it's been implemented in a restrictive way to the user, and a browser has no way to differentiate between the two. Therefore, blame the dev's :) –  Sean T Jan 5, 2018 at 16:57

As has already been stated, setting user-select: none in the page's CSS is what disables selection of text on a page. The easiest way to remove that text selection block would be through a user script like the following that overrides the setting:

Note: This will apply to every page if left enabled, which might not be desirable in all situations.

The script can be installed and easily toggled on/off with a user script manager such as Violentmonkey , Tampermonkey , or Greasemonkey .

• 1 This will apply to every page if left enabled, which might not be desirable in all situations. Could you not just nest the function in an if statement that executes the script only if the URL matches a particular site or array of sites? –  Hashim Aziz Jan 9, 2018 at 3:33
• 1 @Hashim That isn't necessary; you can specify which pages it applies to with one or more @match statements, but that would require modifying the script when you wanted it to apply to a specific page, unless you only visit a specific site or set of sites that you always want to modify. For the example script I made it generic by using *://*/* as the URL to match, so it will apply everywhere. It can be toggled on and off from the menu of the user script manager. –  Herohtar Jan 9, 2018 at 3:55
• In my case, the css rule that worked was body * :not(input):not(textarea) { user-select: auto !important; -webkit-user-select: auto !important; } –  Keyslinger Jan 27, 2022 at 4:35
• This site brought me here hildastouchofspice.com/2011/12/marzipan.html#prettyPhoto . The above answer plus superuser.com/a/964711/617826 does the trick. –  DannyBoi Dec 17, 2022 at 4:02

You can hit Ctrl + P and grab what you need from the print preview.

• 3 Neat trick, for those who don't want to install yet another extension or meddle with the developer tools console. –  Simón Nov 19, 2022 at 21:46
• Great hack. Too bad it often radically changes the styling of the page, making it hard to find the text again. –  Al Ro Jan 10 at 21:08

Open the developer tools (F12), change to the Elements tab, and untick the following CSS rules under body :

• user-select: none;
• webkit-user-select: none;

The simplest way to solve this problem is by using a bookmarklet:

• In your browser create a new bookmark.
• Name it, for example, "Enable Selection" (without quotes), or however you like.
• In the location textbox paste this code:

So whenever you want to enable text selection on some annoying web site, just click on this bookmark.

This code takes care of most frequent CSS and JavaScript-based ways that a-holes use to disable text selection on their web sites. Although some less frequent ways might require some additional adjustments to the code.

• Works great! This should be the new accepted answer –  towe Feb 4, 2022 at 8:28
• I came across a webpage where appending a style element didn't work so I changed it to this: var body = document.getElementsByTagName("body")[0]; body.setAttribute("style", 'user-select: auto !important;-webkit-user-select: auto !important;'); –  t3chb0t Jul 11, 2022 at 20:16
• nice, need more one code with context after onselectstart, we need context for copy a text document.body.oncontextmenu=function(){return true}; –  KingRider Dec 27, 2022 at 17:10
• Best solution for the challenged and lazy @rses ^_^ –  Whoever Jan 1, 2023 at 13:43
• Works perfect. Thank for saving time and effort. –  invinciblemuffi May 15, 2023 at 8:48

With Firefox, there's a really easy way:

It also works great to download embedded images on which right-click has been disabled.

• 1 Yeap, it works also on IE11. –  Marco Demaio Feb 20, 2018 at 13:37
• Firefox 91.11.0esr: FWIW, I can toggle View > Page Style > No Style back to Basic Page Style and gain text selection capability...FYI, you MAY have to interact with the No Style page a bit before toggling back... –  Digger Nov 22, 2022 at 19:04

I'm using Stylus ( https://add0n.com/stylus.html ) and I made a style to apply to all websites, and thus I am ensuring everything is selectable:

The asterisk is to make sure the style is not only applied to a certain css element (like <body> ), but to all elements. I encountered cases where the selection blocking was applied to a button text only, so making a css for <body> would not help.

I use selection for instant translation on foreign language websites.

• I fixed the formatting and the visibility of the inline <body> tag; see superuser.com/help/formatting –  Arjan Jan 7, 2019 at 15:10
• you are the best bro –  nim Aug 11, 2022 at 20:33

As other answers have stated, its to do with the CSS on the body of the pages. Whilst you can edit this by hand every time, if you use this site a lot, I would suggest that if you use Chrome, you install the Stylish extension.

Stylish lets you create additional CSS to apply to pages. It can be used all over the web. It has the benefit of automatically applying whenever you visit the website (so you don't need to add it via the dev tools on every page load).

Once installed, click on the icon in the toolbar and select "Create New Style". It will automatically create the entry for the website you are currently visiting. You can then add any CSS you like to the page. But be warned: some styles may not be overriddable (especially if its written on the element itself, rather than a CSS class).

In this case, you can use the import function, and add the below code, this should allow you to select the text on the website you linked to.

• Adding webkit and ms prefixes for something that will only run on firefox is a bit... redundant. –  Stephan Bijzitter Jan 8, 2018 at 12:31
• 1 @StephanBijzitter True, I just overwrote all the styles relating to user-select already on the page. But then again, it does mean that someone not using chrome but with a similar extension could fairly easily copy this class and gain the same benefit without work - and it doesn't really harm the solution. –  Obsidian Phoenix Jan 8, 2018 at 12:33

I prefer using " bookmarklets " to user scripts or browser extensions. Try using one of the many bookmarklets to disable CSS & grab the required text

As it is may mess up the readability of web-page, I sometimes open the page in a different tab (right click on tab, select Duplicate) before removing the styling with the bookmarklet

You can also try the Google Mobilizer Bookmarklet to view just text of web pages

• I just used this bookmarklet to allow copying of my entire Netflix watch list with images and everything into a Thunderbird email: gist.github.com/duzun/d66c775a39a5be9fb519/stargazers –  Dreamspace President Jul 24, 2021 at 20:09

Install the AddOn "Absolute Enable Right Click & Copy", that enables everything that the other No Script AddOns can not.

Several of the solutions proposed might be browser specific, so it's worth suggesting a few alternatives:

Use a broswer that respects you more.

a. Emacs has browsers emacs-w3m and eww that will always allow one to select text.

b. Other text-based browsers such as lynx , elinks , and w3m , might allow one to select text, but even if not, if running those programs in a terminal window, one can select text using one's mouse. And, if one is using those programs from within tmux , one can use tmux 's ability to copy text even without a mouse.

Use a command line tool to download the entire url in a readable text format.

a. w3m -dump [your_url] > your_file.txt

b. lynx -dump [your_url] > your_file.txt . I usually prefer this one because it marks hyperlinks as readable footnotes!

Just create the following css style :

There is an extension called Stylish which allows you to install that (or any other) css code in any website of your choice. Just type in the above css code and tell which website[s] you want it to be applied to and you are good to go. This extension works on Chrome, Baidu, Firefox and Opera. If you happen to be on IE then you are out of luck. But you already know that don't you.

Another possibility to deactivate the selection is to use the property onselectstart , as explained by Ismael Miguel :

Another way is to add onselectstart="return false;" to the body. Some other techniques (like, removing the selection with JavaScript) work as well. – Ismael Miguel Jan 6 '18 at 12:07

Via the Developer Tools of Chrome, I could dynamically remove the selectstart event handler and then could select the text (and hopefully use Ctrl+C which was not disabled).

• You may, in addition, have oncopy="return false;" as an attribute. –  g.a Dec 13, 2022 at 7:34

I saved the web page and then opened it in MS Word. Although that removed some formatting, it allowed me to select and copy the text. An annoying but relatively easy workaround.

• This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post ; instead, provide answers that don't require clarification from the asker . - From Review –  Toto May 3, 2022 at 16:49

For my part, i just delete the < Head > section and all the text was not formated but selectable

• Interesting trick, did not work on the site I was trying to translate the description. Only the description tab is locked and remains locked after removing the <head>. Not to mention that the MASSIVE icons make the page almost explode. nadir.com.br/… –  KalleMP Feb 15 at 11:47

I had a similar problem with a parcel-tracking site which had some Chinese writing I needed to translate.

So I saved the page as a pdf and could then select and copy anything I needed in the pdf! (I'm using Ubuntu with print to pdf).

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged google-chrome firefox browser javascript ..

• The Overflow Blog
• How do mixture-of-experts layers affect transformer models?
• What a year building AI has taught Stack Overflow
• Featured on Meta
• New Focus Styles & Updated Styling for Button Groups
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network
• Google Cloud will be Sponsoring Super User SE

Hot Network Questions

• Why did the US and Israel vote against making food a human right?
• Do rats swim 240 times longer after being saved from drowning?
• lua-ul underlines with unwanted gaps
• Why does my futuristic society want transparent iPads and computer monitors?
• How to replace a file path with whitespace using sed?
• What are the best options for watching total or partial solar eclipse during bad weather conditions?
• Bad "breakup" with supervisor. What do I do?
• Unable to burn Windows 11 ISO image in macOS 14 (Sonoma)
• Should I mention on my resume that I've been enrolled in a PhD program when applying to a new one?
• My workmate wants me to teach her art but I would prefer to maintain a work-only boundary
• Bridge psychic bid without looking at cards
• Math tools for restructured lectures
• Does the acetic acid in vinegar oxidize significantly?
• What are the reasons for CORS failure errors to not be available to JS?
• Baseball caught: Ownership? Can one leave?
• Sci-Fi novel where explorers from Earth visited 3 planets
• A suggestion on how to create a cemetery shapefile to include multiple entries in an attribute table?
• How to break off outlet yoke tabs without bending
• FTIR Spectra: Did I synthesize ethyl gallate from gallic acid?
• What kind of chart is this and how to read it?
• Simple task for networking programmers
• Staying out of the blind spot of a truck that doesn't have mirrors?
• Emulate Jelly's tie-scan
• How to remove embedded newlines from CSV fields

• Skip to main content
• Select language
• Skip to search
• user-select

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property user-focus was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.

Note: Check the compatibility table for the proper prefixes to use in various browsers.

Note: One of the differences between browser implementations is inheritance. In Firefox, -moz-user-select is not inherited by absolutely positioned elements, but in Safari and Chrome, -webkit-user-select is inherited by those elements.

Note:  CSS UI 4  rename user-select: element to contain .

Specifications

Browser compatibility.

[1] In addition to the -moz prefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit , defaulting to false . Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true .

[2] See documentation on MSDN .

[3] Chromium bug.

• ::selection
• Safari -webkit-user-select reference documentation
• IE 10 Blog post
• user-select in CSS Basic User Interface Module Level 4 .

Document Tags and Contributors

• CSS Reference
• Mozilla Extensions
• -moz-appearance (-webkit-appearance, appearance)
• -moz-binding
• -moz-border-bottom-colors
• -moz-border-left-colors
• -moz-border-right-colors
• -moz-border-top-colors
• element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value."> -moz-context-properties
• -moz-float-edge
• -moz-force-broken-image-icon
• -moz-image-region
• -moz-orient
• -moz-outline-radius
• -moz-outline-radius-bottomleft
• -moz-outline-radius-bottomright
• -moz-outline-radius-topleft
• -moz-outline-radius-topright
• -moz-stack-sizing
• -moz-text-blink
• -moz-user-focus
• -moz-user-input
• -moz-user-modify
• -moz-window-shadow
• box-direction
• box-flex-group
• box-ordinal-group
• overflow-clip-box

CSS user-select: none

Method of preventing text/element selection using CSS.

• 4 - 53 : Supported
• 54 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 18 : Supported
• 79 - 122 : Supported
• 3.1 - 17.3 : Supported
• 17.4 : Supported
• 17.5 : Supported
• TP : Supported
• 2 - 68 : Supported
• 69 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 12.1 : Not supported
• 15 - 40 : Supported
• 41 - 108 : Supported
• 109 : Supported
• 5.5 - 9 : Not supported
• 10 : Supported
• 11 : Supported

Chrome for Android

Safari on ios.

• 3.2 - 17.3 : Supported

Samsung Internet

• 4 - 5.4 : Supported
• 6.2 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

user-select

The user-select property controls the ability in which a user can select text within an HTML element.

You’ll need to prefix user-select with -webkit- for it to work on Safari and Safari on iOS. This chart on Caniuse tracks that limitation and also shows all of the browser that support the property.

And, when you don’t prefix user-select , you can see from this CodePen that the text is still able to be selected on Safari.

user-select values

Let’s dive into what each of these properties actually does.

Related posts

• How to Disable Text Selection Highlighting

user-select

The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome ), except in textboxes.

Note: user-select is not an inherited property, though the initial auto value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers do implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium has chosen to fix the issues to make the final behavior meet the specifications.

The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.

The used value of auto is determined as follows:

• On the ::before and ::after pseudo elements, the used value is none
• If the element is an editable element, the used value is contain
• Otherwise, if the used value of user-select on the parent of this element is all , the used value is all
• Otherwise, if the used value of user-select on the parent of this element is none , the used value is none
• Otherwise, the used value is text

The text can be selected by the user.

The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

Note: CSS UI 4 renames user-select: element to contain .

Formal definition

Formal syntax.

Note: -webkit-user-select: all; doesn't work in Safari; use only "none" or "text", or else it will allow typing in the <html> container. See the browser compatibility table for up-to-date information.

Specifications

Browser compatibility.

• Polyfill for user-select: contain
• ::selection pseudo-element
• The JavaScript Selection object

© 2005–2023 MDN contributors. Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later. https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

The user-select Property

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

user-select: all not working on Chrome w/ Slate #3798

rneiss commented Jul 23, 2020

kalda341 commented Dec 8, 2020 • edited

Sorry, something went wrong.

kalda341 commented Dec 8, 2020

No branches or pull requests