user select in safari

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

• 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

Controls the level of style and functionality of the site, a lower fidelity meaning less bandwidth, battery, and CPU usage. Learn more .

Custom Style Sheets in Safari

I first heard mention of adding a custom style sheet in Safari a couple months back. I honestly can’t remember where I saw it but I was reading something and, in passing, the author mentioned the idea of hiding the right sidebar on Twitter using a custom style sheet in Safari. This thing:

It’s funny how you sometimes miss the entire point of someone’s writing and selectively remember what you want, in this case “hey, I can hide that dumb module on Twitter with little effort?” I’d like to say that I have the self-discipline to avoid clicking on anything in that module, but unfortunately I am not that strong of a person. Sometimes I just get bored and something there makes me think “oh, hmm, I wonder...” and then I click it. It’s one of those things where, if it wasn’t there, it wouldn’t be a problem. Like keeping cookies right next to your desk. But it’s frictionless and easy and RIGHT THERE that I succumb. But I digress. My weaknesses are not on trial in this post.

The thought hit me: “hey I should hide that right sidebar on twitter.com using a custom style sheet in Safari!” So I did. And then I moved on with life. I never thought to write a post about it because, you know, custom style sheets in a browser? That’s old news.

But then, I recently found this post published in November of 2020 about customizing your browsing experience using custom style sheets and thought “I guess this isn’t old news just quite yet.” Plus I’m trying to write a lot more this year , so here we are.

Note: it’s worth mentioning that hiding the right sidebar in twitter isn’t a novel idea. Craig Hockenberry created a Safari extension that’ll do it for you called “Fixerrific”. Granted, like my custom style sheet, this removes the entire right sidebar, including the search box which you might actually find useful. That said, you can still access the search functionality on twitter by going to the Explore tab.

How I Did It

First off, Safari lets you specify a custom style sheet.

In case you don’t know, a custom style sheet is a bunch of CSS rules that you get to specify and then the browser will apply them to every single web page you visit .

The first thing I needed to do was open twitter.com and find out what type of CSS rule I could write to target that right sidebar. I can tell you, it wasn’t easy. Twitter has a bunch of generated classes names, which I’m assuming are quite dynamic, so finding a rule that would target the right sidebar and not change in the near future seemed like it might be tough. But then I found it: a DOM node which encompassed the entire right sidebar that had a very specific attribute data-testid="sidebarColumn" .

I can’t say for sure, but that looks like one of those attributes the QA team appends to certain elements they want to find with their automated browser tests. The whole purpose of those kinds of attributes is so the engineers won’t touch them and change their names, that way the automated tests can run for a long time without breaking. Again, I can’t make any guarantees, but this selector will probably be around for a while. So I felt pretty confident I could use that selector and not have it break in a short period of time due to twitter refactoring their DOM markup.

Once I had a selector I could use, I opened my text editor and created the following CSS file:

From there, I saved the .css file in my Dropbox folder (for backup purposes, i.e. a lazy man’s version control) then opened Safari’s preferences and selected my newly created file. A restart of Safari and boom! The sidebar was gone.

Feeling emboldened and empowered with my CSS sword of righteousness, I figured I’d go ahead and get rid of the DM/chat widget thing twitter recently introduced. It was merely visual noise to me. And fortunately, it had a similar way to be targeted: [data-testid="DMDrawer"] .

Pretty cool. Now I have a version of twitter custom tailored to me, free of a lot of distractions I don’t want to see.

Observations Nobody Asked For

If you write a lot of custom styles for sites across the web, you could start running into naming collisions. It would be neat if you could scope styles to a specific domain. Maybe there’s a way to do it? I couldn’t think of one. Imagine:

JavaScript has access to a page’s URL via window.location but AFAIK that’s not available—at least not in any standardized way—in CSS.

It's likely a terrible idea, but we have custom user style sheets, is there such a thing as a custom user scripts? Imagine giving a .js file to the browser and it runs it on every single page, like a custom style sheet. Why? Because I want to specify all my custom styles using JavaScript not CSS.

Just kidding.

But seriously, if there was something like this, I could have a script that runs on every page and sticks an attribute on the root html element with the page’s URL. Imagine:

This would result in every page getting an attribute on the root element with the current page’s href on it.

This would allow me to scope every single one of my custom style sheet selectors to a specific domain:

Honestly, that sounds cool but impractical (not to mention the incredible security implications). It’s fun to think about though.

But hey, if I felt like disabling JavaScript, I could use this theoretical custom script functionality to run the following JavaScript on ever page I visit, just to show who really is in power:

I love old-school browser functionality like this. Can you imagine a feature like custom style sheets being proposed and implemented in today’s world? I feel like this is in Safari as a holdover from a bygone era. Could it ever get the momentum to happen today? I worry Apple might take it out sometime in the future.

All that said, if you want to read more, this post has a perspective on the history of custom style sheets in Safari that you might find interesting.

Update: 2020-01-14

I received an email from John P. Rouillard who read my question about having custom user scripts and said “You mean like greasemonkey or tapermonkey?”

I realized when I wrote that paragraph that I was merely describing what browser extensions are for. What I was trying to get at is that it would be really cool if custom user scripts were a feature of the browser, i.e. adding a custom user script was as simple as adding a custom style sheet: select a .js file on disk and boom, you’re done.

That said, maybe I’ll give one of these user scripts extensions a try. I’ve heard of greasemonkey and used it back in like 2012. But I’ve never heard of tampermonkey. Looks like it’s open source and even available for Safari . Thanks John!

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

• / properties
• / user-select

user-select

The user-select property specifies how users can select text within an element. It offers options such as disabling text selection or permitting the selection of an entire element. Moreover, it finds usage in improving the user experience by optimizing the text selection process according to the content or design elements being used.

Examples and Usage

In the example below, the first paragraph has default text selection behavior, the second paragraph restricts text selection, and the third one enables the selection of the entire text content with a single click.

Note: The property has quirks in its behavior, and relies on vendor prefixes depending on the browser being used. More information on the specifics can be found in the sections below.

The user-select property accepts the following values:

Associated Properties

• ::selection pseudo-element

Tips and Tricks

Use user-select: none; for elements where text selection isn't necessary, like buttons or icons.

To achieve the same effect, you can place text within the content: ''; property of a ::before or ::after CSS pseudo-element.

Keep in mind that preventing text selection may impact the user experience for certain users, such as those using assistive technologies.

Browser Compatibility

Note: Specific information on prefix support can be found in the first link of the Useful Resources

• Useful Resources

Can I use - user-select

W3C Working Draft - user-select

Chrome Status on Prefix Support

On this page

The user-select Property

CSS properties - user-select

revision: February 2, 2024

user-select property

- specifies whether the text of an element can be selected .

In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

CSS syntax : user-select: auto | none | text | all;

Property values:

auto : default. Text can be selected if the browser allows it

none : prevent text selection

text : the text can be selected by the user

all : text selection is made with one click instead of a double-click

JavaScript syntax: object.style.userSelect="none"

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

• Animated Text Generator
• Animation / Keyframe Generator
• Border Radius Generator
• Box Shadow Generator
• Button Generator
• Checkbox / Radio Generator
• Clip Path Generator
• Column Generator
• Cubic Bezier Generator
• Flip Swith Generator
• Flexbox Generator
• Glitch Text Effect
• Google Fonts CSS
• Gradient Generator
• Grid Generator
• Image Filter Generator
• Input Range Generator
• Layout Generator
• Loader / Spinner Generator
• Menu Generator
• Pattern Generator
• RGBA Generator
• Ribbon Generator
• Ribbon Banner Generator
• Scrollbar Generator
• Select Dropdown Generator
• Sprite Generator
• Text Gradient Generator
• Text Input Generator
• Text Rotate Generator
• Text Shadow Generator
• Tooltip Generator
• Triangle Generator
• 3D Transform Generator
• CSS At Rules
• CSS Animations
• CSS Color Names
• CSS Data Types
• CSS Functions
• CSS Preloaders
• CSS Properties
• CSS Pseudo Classes
• CSS Selectors
• LESS to CSS Compiler
• SCSS to CSS Compiler
• Stylus to CSS Compiler
• CSS to LESS Converter
• CSS to SCSS Converter
• CSS to Stylus Converter
• CSS Color Converter
• CSS Cursor Viewer
• CSS Font Preview
• CSS Code Formatter
• CSS Lengths
• CSS Code Optimizer
• CSS Validator
• CSS Visual Style Editor
• Convert Image to Data
• Online CSS Editor
• HTML to Pug Converter
• HTML to Markdown Converter
• Pug to HTML Compiler
• Markdown to HTML Compiler
• HTML Beautifier / Minifier
• HTML Character Codes
• HTML Colors
• HTML Entity Encoder / Decoder
• HTML Online Editor
• HTML Table Generator
• HTML Tutorial
• HTML Attributes
• HTML Event Attributes
• HTML Global Attributes
• HTTP Status Codes
• HTML Validator
• @counter-style
• @font-feature-values
• @font-palette-values
• <absolute-size>
• <alpha-value>
• <angle>
• <angle-percentage>
• <basic-shape>
• <blend-mode>
• <color>
• <filter-function>
• <flex>
• <frequency>
• <gradient>
• <image>
• <integer>
• <length>
• <number>
• <percentage>
• <position>
• <ratio>
• <resolution>
• <string>
• <time>
• <url>
• brightness()
• drop-shadow()
• grayscale()
• hue-rotate()
• conic-gradient()
• linear-gradient()
• radial-gradient()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• perspective()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• accent-color
• align-content
• align-items
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-end-end-radius
• border-end-start-radius
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-start-end-radius
• border-start-start-radius
• border-style
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-decoration-break
• break-after
• break-before
• break-inside
• caption-side
• caret-color
• color-scheme
• column-count
• column-fill
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container-name
• container-type
• counter-increment
• counter-reset
• counter-set
• empty-cells
• flex-direction
• flex-shrink
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-palette
• font-size-adjust
• font-stretch
• font-synthesis
• font-synthesis-small-caps
• font-synthesis-style
• font-synthesis-weight
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• forced-color-adjust
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-start
• grid-row-end
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• hanging-punctuation
• hyphenate-character
• hyphenate-limit-chars
• image-orientation
• image-rendering
• inline-size
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start
• justify-content
• justify-items
• justify-self
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type
• margin-block
• margin-block-end
• margin-block-start
• margin-bottom
• margin-inline
• margin-inline-end
• margin-inline-start
• margin-left
• margin-right
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size
• mix-blend-mode
• object-position
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow-anchor
• overflow-block
• overflow-clip-margin
• overflow-inline
• overflow-wrap
• overscroll-behavior
• overscroll-behavior-block
• overscroll-behavior-inline
• overscroll-behavior-x
• overscroll-behavior-y
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• paint-order
• perspective
• perspective-origin
• place-content
• place-items
• pointer-events
• print-color-adjust
• ruby-position
• scroll-behavior
• scroll-margin
• scroll-margin-block
• scroll-margin-block-end
• scroll-margin-block-start
• scroll-margin-bottom
• scroll-margin-inline
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-padding
• scroll-padding-block
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-inline
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• scrollbar-color
• scrollbar-gutter
• scrollbar-width
• shape-image-threshold
• shape-margin
• shape-outside
• table-layout
• text-align-last
• text-combine-upright
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-justify
• text-orientation
• text-overflow
• text-rendering
• text-shadow
• text-transform
• text-underline-offset
• text-underline-position
• touch-action
• transform-box
• transform-origin
• transform-style
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• white-space
• will-change
• word-spacing
• writing-mode
• :first-child
• :first-of-type
• :focus-visible
• :focus-within
• :fullscreen
• :host-context()
• :indeterminate
• :last-child
• :last-of-type
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :out-of-range
• :placeholder-shown
• :read-write
• ::file-selector-button
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• ::slotted()
• accept-charset
• autocomplete
• crossorigin
• formenctype
• formnovalidate
• placeholder
• onafterprint
• onbeforeprint
• onbeforeunload
• oncanplaythrough
• oncontextmenu
• ondragenter
• ondragleave
• ondragstart
• ondurationchange
• onhaschange
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseover
• onmousewheel
• onratechange
• onreadystatechange
• ontimeupdate
• ontouchcancel
• ontouchmove
• ontouchstart
• onvolumechange
• contenteditable
• <abbr>
• <address>
• <area>
• <article>
• <aside>
• <audio>
• <base>
• <bdi>
• <bdo>
• <blockquote>
• <body>
• <button>
• <canvas>
• <caption>
• <cite>
• <code>
• <col>
• <colgroup>
• <comment>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <dialog>
• <div>
• <doctype>
• <embed>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <form>
• <head>
• <header>
• <html>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <legend>
• <link>
• <main>
• <map>
• <mark>
• <menu>
• <meta>
• <meter>
• <nav>
• <noscript>
• <object>
• <optgroup>
• <option>
• <output>
• <picture>
• <pre>
• <progress>
• <ruby>
• <samp>
• <script>
• <section>
• <select>
• <slot>
• <small>
• <source>
• <span>
• <strong>
• <style>
• <sub>
• <summary>
• <sup>
• <table>
• <tbody>
• <template>
• <textarea>
• <tfoot>
• <thead>
• <title>
• <track>
• <var>
• <video>
• <wbr>
• 100 Continue
• 101 Switching Protocols
• 103 Early Hints
• 201 Created
• 202 Accepted
• 203 Non-Authoritative Information
• 204 No Content
• 205 Reset Content
• 206 Partial Content
• 300 Multiple Choices
• 301 Moved Permanently
• 303 See Other
• 304 Not Modified
• 307 Temporary Redirect
• 308 Permanent Redirect
• 400 Bad Request
• 401 Unauthorized
• 402 Payment Required
• 403 Forbidden
• 404 Not Found
• 405 Method Not Allowed
• 406 Not Acceptable
• 407 Proxy Authentication Required
• 408 Request Timeout
• 409 Conflict
• 411 Length Required
• 412 Precondition Failed
• 413 Content Too Large
• 414 URI Too Long
• 415 Unsupported Media Type
• 416 Range Not Satisfiable
• 417 Expectation Failed
• 421 Misdirected Request
• 422 Unprocessable Content
• 424 Failed Dependency
• 426 Upgrade Required
• 428 Precondition Required
• 429 Too Many Requests
• 431 Request Header Fields Too Large
• 451 Unavailable For Legal Reasons
• 500 Internal Server Error
• 501 Not Implemented
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway Timeout
• 505 HTTP Version Not Supported
• 507 Insufficient Storage
• 508 Loop Detected
• 510 Not Extended
• 511 Network Authentication Required

If you would like to support CSSPortal, please consider making a small donation.

CSS user-select Property

Description.

The user-select CSS property controls whether the user can select text. It can be used to disable text selection on certain elements of a web page, such as headings, images, or buttons. This can be useful for preventing users from accidentally highlighting or copying text that is not meant to be interactive.

Interactive Demo

User select demo.

This text is always selectable

This text is not always selectable depending

• none Text cannot be selected by the user.
• auto The default value. Text can be selected by the user.
• text Text can be selected by the user, but only within the element.
• all Text can be selected by the user, including text within other elements.
• contain Text can be selected by the user, but only within the element and its descendants.

Browser Support

The following table will show you the current browser support for the CSS user-select property.

Last updated by CSSPortal on: 2nd January 2024

Share this Page

If you have found this page helpful, please consider sharing with other users, just click on your preferred social media link or copy the webpage from the link below.

Your favorites are stored in your browsers cache. If you clear your browsing data, your favorites will be deleted also.

CSS :read-only and :read-write selectors

:read-only and :read-write pseudo-classes to match elements which are considered user-alterable

::selection CSS pseudo-element

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.

Datalist element

Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.

Color input type

Form field allowing the user to select a color.

input event

The `input` event is fired when the user changes the value of an `<input>` element, `<select>` element, or `<textarea>` element. By contrast, the "change" event usually only fires after the form control has lost focus.

Multiple file selection

Allows users to select multiple files in the file picker.

Range input type

Form field type that allows the user to select a value using a slider widget.

readonly attribute of input and textarea elements

Makes the form control non-editable. Unlike the `disabled` attribute, `readonly` form controls are still included in form submissions and the user can still select (but not edit) their value text.

CSS user-select: none

Method of preventing text/element selection using CSS.

Web Bluetooth

Allows web sites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way.

css property: user-select

Css property: user-select: all, css property: user-select: auto, css property: user-select: contain, css property: user-select: none, css property: user-select: text, css selector: `:user-invalid`, css selector: `:user-valid`.

• 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 .

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Print or create a PDF of a webpage in Safari on Mac

When printing or creating a PDF of a webpage, you can include its background image and color, and show the web address and date in headers and footers.

Open Safari for me

Click the options pop-up menu (in the separator bar), choose Safari, then set the webpage printing options.

If you don’t see the options pop-up menu in a separator bar to the right of the page preview, click Show Details at the bottom of the Print dialog.

To create a PDF of the webpage, click PDF at the bottom of the dialog, then choose what you want to do with the PDF.

How to view and clear your web browsing history in Safari on iPhone or iPad

Clearing your browsing history on iPhone and iPad in Safari has been a straightforward affair for years now.

Sometimes you want to clear your history to get rid of bloat and streamline your browsing experience. Other times, you're trying to hide a gift purchase from a loved one.

Apple makes it very easy to clear your browsing history on both the iPhone and iPad and we're here to show you how. Here's how you can make a fresh start in Safari and debloat your web browsing experience.

What you'll need

On the latest models, web browsing is smoother than ever before thanks to ProMotion in the iPhone 15 Pro and faster chipsets like the M2 found in the iPad Air 6 . If you're looking for a new Apple device, we highly recommend one of the following: 

iPhone 15 Pro $999 at Apple

Grab the best iPhone available right now starting from $999. With a gorgeous titanium finish and the most powerful chip ever in an iPhone, you won't be disappointed with the 15 Pro.  View Deal

iPad Air 6 13-inch | $799 $754 at Amazon

With an M2 chip and a 13-inch screen option, the new iPad Air 6 is one of the best iPads available right now. Normally $799, you can pick up the 13-inch model for nearly $50 off at the moment — don't miss out. View Deal

How to find your web-browsing history

Viewing your web history in iOS 17 and iPadOS 17 is very easy to do, here's how:

• In Safari, tap the Bookmarks button in the toolbar that's below the address bar.
• Tap the History icon in the upper right corner. Here, you can view your entire web history.
• Use the History search bar to find previously viewed pages.

How to clear your web browsing history

If the time calls to wipe most or all of your web browsing history in Safari, here's how to do it on both iPhone and iPad.

To note, the below steps will be the same if you attempt to wipe your web browsing history on an iPhone 15 Pro Max or an iPad Mini 6 , all Apple devices require the same steps.

• In Safari, tap the Bookmarks button.
• Select the History icon in the upper right corner.
• Tap Clear and select how much history you'd like to clear: the last hour, the last day, 48 hours' worth, or all recorded history.

One more thing… A feature no one talks about

Privacy on the web matters more than ever in these modern times. Websites store the pages you click on, especially when you sign into a page that can contain personal information about you.

It's great to have a feature like this in Safari — but it would be good to have this automated in iOS 18 . If Apple's web browser could automatically clear history after 24 hours it would be very useful, as you wouldn't leave a trail behind.

Regardless, it's still a good feature, and one you should use every week.