user-select

Avatar of Chris Coyier

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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

user select for safari

CSS Reference

Css properties, css user-select property.

Prevent text selection of a <div> element:

Definition and Usage

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property Values

Related pages.

HTML DOM reference: userSelect property

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

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

Safari CSS Reference

  • Table of Contents
  • Jump To…
  • Download Sample Code

Supported CSS Properties

Safari and WebKit implement a large subset of the CSS 2.1 Specification defined by the World Wide Web Consortium (W3C), along with portions of the CSS 3 Specification. This reference describes the supported properties and provides Safari availability information. If a property is not listed here, it is not implemented by Safari and WebKit.

The CSS attributes in this article are divided according to the groups defined by the W3C CSS Specification:

Box Model describes properties specific to the bounding boxes of block elements, including borders, padding, and margins. Additional box-related properties specific to tables are described separately in Tables .

Visual Formatting Model describes properties that set the position and size of block elements.

Visual Effects describes properties that adjust the visual presentation of block elements, including overflow behavior, resizing behavior, visibility, animation, transforms, and transitions.

Generated Content, Automatic Numbering, and Lists describes properties that allow you to change the contents of an element, create automatically numbered sections and headings, and manipulate the style of list elements.

Paged Media describes properties associated with controlling appearance attributes specific to printed versions of a webpage, such as page break behavior.

Colors and Backgrounds describes properties that control the background of block-level elements and the color of text content within elements.

Fonts describes properties specific to font selection for text within an element. It also describes properties used in downloadable font definitions.

Text describes properties specific to text styles, spacing, and automatic scrolling (marquee).

Tables describes layout and styling properties specific to table elements.

User Interface describes properties that relate to user interface elements in the browser, such as scrolling text areas, scroll bars, and so on. It also describes properties that are outside the scope of the page content, such as cursor style and the callout shown when you touch and hold a touch target such as a link in iOS.

Defines a variety of border properties for an element within one declaration.

The width of the border on all sides.

The style of the border.

The color of the border.

border-color

Border-style, border-width, border-bottom.

Defines a variety of properties for an element’s bottom border within one declaration.

The width of the bottom border.

border-bottom-color

border-bottom-style

border-bottom-width

Defines the color of the bottom border of an element.

The color of the bottom border.

The value of the element’s color property.

The default color of a hyperlink that is being clicked.

The color that surrounds a UI element, such as a text field, that has focus.

The default color of a hyperlink that has been visited.

The default text color.

activeborder , activecaption , appworkspace , aqua , background , black , blue , buttonface , buttonhighlight , buttonshadow , buttontext , captiontext , fuchsia , gray , graytext , green , grey , highlight , highlighttext , inactiveborder , inactivecaption , inactivecaptiontext , infobackground , infotext , lime , maroon , match , menu , menutext , navy , olive , orange , purple , red , scrollbar , silver , teal , threeddarkshadow , threedface , threedhighlight , threedlightshadow , threedshadow , transparent , white , window , windowframe , windowtext , yellow

Changes to this property can be animated.

Defines the style of the bottom border of an element.

The style of the bottom border.

dashed , dotted , double , groove , hidden , inset , none , outset , ridge , solid

Defines the width of the bottom border of an element.

Length units

medium , thick , thin

Defines the color of an element’s border.

border-left-color

Border-right-color, border-top-color, border-left.

Defines a variety of properties for an element’s left border within one declaration.

The width of the left border.

The style of the left border.

The color of the left border.

border-left-style

border-left-width

Defines the color of the left border of an element.

Defines the style of the left border of an element.

Defines the width of the left border of an element.

border-right

Defines a variety of properties for an element’s right border within one declaration.

The width of the right border.

The style of the right border.

The color of the right border.

border-right-style

border-right-width

Defines the color of the right border of an element.

Defines the style of the right border of an element.

Defines the width of the right border of an element.

Defines the style for an element’s border.

border-top-style

Defines a variety of properties for an element’s top border within one declaration.

The width of the top border.

The style of the top border.

The color of the top border.

border-top-width

Defines the color of the top border of an element.

Defines the style of the top border of an element.

Defines the width of the top border of an element.

Defines the width of the border of an element.

The width of the border.

Defines the width of an element’s outer-element margin.

The width of the margin.

The width of the top margin.

The width of the right margin.

The width of the bottom margin.

The width of the left margin.

margin-bottom

Margin-left, margin-right.

Defines the width of the bottom margin of an element.

Numbers as a percentage, length units

Defines the width of the left margin of an element.

Defines the width of the right margin of an element.

Defines the width of the top margin of an element.

Defines the width of an element’s inner-element padding.

The width of the padding on all sides.

The width of the top padding.

The width of the right padding.

The width of the bottom padding.

The width of the left padding.

padding-bottom

Padding-left, padding-right, padding-top.

Defines the width of the bottom padding of an element.

Defines the width of the left padding of an element.

Defines the width of the right padding of an element.

Defines the width of the top padding of an element.

-webkit-border-bottom-left-radius

Specifies that the bottom-left corner of a box be rounded with the specified radius.

The radius of the rounded corner.

The horizontal radius of the rounded corner.

The vertical radius of the rounded corner.

-webkit-border-bottom-right-radius

-webkit-border-radius

-webkit-border-top-left-radius

-webkit-border-top-right-radius

This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl , these parameters are reversed.)

Available in Safari 3.0 and later.

Available in iOS 1.0 and later.

Experimental CSS 3.

Specifies that the bottom-right corner of a box be rounded with the specified radius.

-webkit-border-image

Specifies an image as the border for a box.

The method of which to produce the image. This could be expressed by the url() syntax, which contains the URI of the image (in the same fashion as the background-image property), or by a procedural function such as gradient() .

The distance from the top edge of the image.

The distance from the right edge of the image.

The distance from the bottom edge of the image.

The distance from the left edge of the image.

The horizontal repeat style.

The vertical repeat style.

The image is tiled.

The image is stretched before it is tiled to prevent partial tiles

The image is stretched to the size of the border.

The specified image is cut into nine pieces according to the length values given. This property applies to any box, including inline elements, but does not apply to table cells if the border-collapse property is set to collapse .

The first five fields are required. The four inset values that follow method represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px ) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image as well as vector coordinates.

After the required fields, you can optionally include a border width field or fields, preceded by a slash ( / ). You can specify all four border widths individually or specify a single value that applies to all four fields. If these values are not the same size as the inset values, the slices of the original image are scaled to fit. Note that border-width constants like thick are not valid.

Finally, you can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch , or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

Specifies that the corners of a box be rounded with the specified radius.

The radius of the rounded corners.

The horizontal radius of the rounded corners.

The vertical radius of the rounded corners.

Specifies that the top-left corner of a box be rounded with the specified radius.

Specifies that the top-right corner of a box be rounded with the specified radius.

-webkit-box-sizing

Specifies that the size of a box be measured according to either its content (default) or its total size including borders.

The model by which the size of the box is measured.

The box size includes borders in addition to content.

The box size only includes content.

Available in iOS 1.1 and later. (Called box-sizing in iOS 1.0.)

-webkit-box-shadow

Applies a drop shadow effect to the border box of an object.

The horizontal offset of the shadow.

The vertical offset of the shadow.

The blur radius of the shadow.

The color of the shadow.

The box has no shadow.

This property takes four parameters. The first two are horizontal and vertical offsets—down for horizontal, and to the right for vertical. The third value is a blur radius. The fourth value is the color of the shadow. Changes to this property can be animated.

Available in iOS 2.0 and later.

-webkit-margin-bottom-collapse

Specifies the behavior of an element’s bottom margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the bottom margin.

Two adjacent margins are collapsed into a single margin.

The element’s margin is discarded if it is adjacent to another element with a margin.

Two adjacent margins remain separate.

This property allows you to emulate the behavior of some browsers in quirks mode where table cell margins are collapsed into the borders of vertically adjacent cells.

Available in Safari 3.0 and later. (Called -khtml-margin-bottom-collapse in Safari 2.0.)

Apple extension.

-webkit-margin-collapse

Specifies the behavior of an element’s vertical margins if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the vertical margins.

-webkit-margin-top-collapse

Available in Safari 3.0 and later. (Called -khtml-magin-collapse in Safari 2.0.)

-webkit-margin-start

Provides the width of the starting margin.

The width of the starting margin.

The margin is automatically determined.

If the writing direction is left-to-right, this value overrides margin-left . If the writing direction is right-to-left, this value overrides margin-right .

Available in Safari 3.0 and later. (Called it is -khtml-margin-start in Safari 2.0.)

Specifies the behavior of an element’s top margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

The behavior of the top margin.

Available in Safari 3.0 and later. (Called -khtml-magin-top-collapse in Safari 2.0.)

-webkit-padding-start

Provides the width of the starting padding.

The width of the starting padding.

If the writing direction is left-to-right, this value overrides padding-left . If the writing direction is right-to-left, this value overrides padding-right .

Available in Safari 3.0 and later. (Called -khtml-padding-start in Safari 2.0.)

Visual Formatting Model

Defines the location of the bottom edge of the element for both absolute and relative positioning.

The location of the bottom edge of the element.

Available in Safari 1.0 and later.

Available in iOS 1.0 and later

Defines the sides of an element on which no floating elements are permitted to be displayed.

The sides of the element on which no floating elements can be displayed.

both , left , none , right

Sets the direction in which text is rendered.

The direction of the text.

Defines how an element is displayed onscreen.

The display mode.

The element is displayed in its own flex box.

The element is displayed inline in its own flex box.

block , compact , inline , inline-block , inline-table , list-item , none , run-in , table , table-caption , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , table-row-group

Indicates whether an element (often a graphic) should be pulled out of the normal text flow and floated toward a particular horizontal position within its enclosing element.

The position for the element to be floated toward.

center , left , none , right

If float is set to none , the element is displayed inline wherever it appears within the text flow.

If float is set to a positional value, the element is laid out as it normally would be within the flow, then is moved as far as possible towards the specified position. If an element is vertically positioned such that it would run into another element that is part of the same float, it stops at the point of contact. Thus, in effect, this causes these floating elements to stack up at the specified horizontal position.

If the width of a series of stacked floating elements exceeds the width of the enclosing box, further elements wrap to a new row. You can force an element to always wrap to a new row by setting the clear property on that element. (See clear for more information.)

Note:  With the exception of elements with intrinsic width (an img tag, for example), you should always set the width property on floating elements to ensure consistent behavior across browsers.

Defines the height of a structural element.

The height of the element.

Numbers as a percentage, length units, nonnegative values

auto , intrinsic , min-intrinsic

This property has no effect on inline elements. Changes to this property can be animated.

Defines the location of the left edge of the element for both absolute and relative positioning.

The location of the left edge of the element.

line-height

Defines the vertical interline spacing of lines within the text of an element.

The interline spacing value.

Floating-point numbers, Numbers as a percentage, length units

Defines the maximum height of a structural element.

The maximum height.

intrinsic , min-intrinsic , none

Available in Safari 1.3 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the maximum width of a structural element.

The maximum width.

Available in Safari 1.0 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the minimum height of a structural element.

The minimum height.

intrinsic , min-intrinsic

Defines the minimum width of a structural element.

The minimum width.

Specifies how to blend the offscreen rendering into the current composite rendering.

The opacity.

Floating-point numbers

Available in Safari 2.0 and later. (Called -khtml-opacity in Safari 1.1.)

Specifies how an element is positioned.

The positioning model for the element.

absolute , fixed , relative , static

This property affects the behavior of positional properties such as float and left / right / top / bottom .

Defines the location of the right edge of the element for both absolute and relative positioning.

The location of the right edge of the element.

Defines the location of the top edge of the element for both absolute and relative positioning.

The location of the top edge of the element.

unicode-bidi

Defines the Unicode bidirectional text algorithm used to display text.

The bidirectional text algorithm.

bidi-override , embed , normal

This property must be set if you intend to change the direction of inline text.

vertical-align

Defines the vertical alignment of elements inline with text.

The vertical alignment of the text.

The center of the element is aligned with the baseline of the text.

baseline , bottom , middle , sub , super , text-bottom , text-top , top

Defines the width of a structural element.

The width of the element.

Overrides the default stacking order of elements.

The z-index of the element.

Formally, the z-index property sets the height of an element above the drawing plane (in pixels). Its primary use is to override the default stacking order of elements.

By default, elements are stacked in the order in which they appear within the DOM tree; later elements appear on top of earlier elements. If you set a z-index value for an element, that element is displayed on top of all elements with a lower z-index value, underneath all elements with a higher z-index value, and stacked according to its position in the DOM tree relative to all elements with the same z-index value.

By default, elements are assigned a z-index value of auto , which is equivalent to zero ( 0 ).

Specifies the magnification of an element.

The magnification of the element.

Numbers as a percentage, floating-point numbers, nonnegative values

A zoom level of 100% .

Specifies that an element not scale at all when a zoom is applied.

Children of elements with the zoom property do not inherit the property, but they are affected by it. The default value of the zoom property is normal , which is equivalent to a percentage value of 100% or a floating-point value of 1.0 .

Available in Safari 4.0 and later.

Visual Effects

Defines the clipping region.

The clipping region.

A clipping region is the portion of an element in which its content will be rendered. The default is to render content within the entire element size.

If you do not use the constant auto , the value should be in the form of a supported shape (currently limited to rect ).

For example, clip: rect(3px 20px 5px 8px); defines a rectangular clip region with a top edge 3 pixels from the top of the element, a right edge 20 pixels from the left edge of the element, a bottom border 5 pixels from the top of the element, and a left border 8 pixels from the left edge of the element.

Defines the treatment of content that overflows the element’s bounds.

The overflow behavior.

This property allows you to choose the behavior for content that overflows the element bounds, such as providing scroll bars or hiding the overflowed content.

Defines the treatment of content that overflows the element’s horizontal bounds.

The content behaves like a marquee.

auto , hidden , overlay , scroll , visible

Stable CSS 3.

Defines the treatment of content that overflows the element’s vertical bounds.

Specifies the directions in which resizing is allowed.

The directions in which resizing is allowed.

auto , both , horizontal , none , vertical

Defines whether or not an element is visible onscreen.

collapse , hidden , visible

Note that elements made invisible using this property still take up space onscreen. Changes to this property can be animated.

Available in Safari 1.0 and later. (All supported except for collapse .)

-webkit-animation

Combines common animation properties into a single property.

See -webkit-animation-name for details.

See -webkit-animation-duration for details.

See -webkit-animation-timing-function for details.

See -webkit-animation-delay for details.

See -webkit-animation-iteration-count for details.

See -webkit-animation-direction for details.

Refer to the respective property for details of each property and default values.

-webkit-animation-delay

Defines when an animation starts.

The time to begin executing an animation after it is applied. If 0 , the animation executes as soon as it is applied. If positive, it specifies an offset from the moment the animation is applied, and the animation delays execution by that offset. If negative, the animation executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the animation. Nonzero values must specify a unit: s for seconds, ms for milliseconds. The default value is 0 .

The animation begins immediately.

This property allows an animation to begin execution some time after it is applied.

-webkit-animation-direction

Determines whether the animation should play in reverse on alternate iterations.

The direction to play. The default value is normal .

Play each iteration of the animation in the forward direction.

Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.

When an animation is played in reverse, the timing functions are also reversed. For example, when played in reverse, an ease-in animation appears as an ease-out animation.

-webkit-animation-duration

Specifies the length of time that an animation takes to complete one iteration.

The duration of an animation. If 0 , the animation iteration is immediate (there is no animation). A negative value is treated as 0 . The default value is 0 .

-webkit-animation-fill-mode

Specifies whether the effects of an animation are apparent before the animation starts and after it ends.

The animation’s fill mode. Can be none , forwards , backwards , or both .

The effects of the animation are apparent only during the defined duration of the animation.

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

The animation’s initial keyframe is applied as soon as the animation style is applied to an element. This only affects animations that have a nonzero value for -webkit-animation-delay .

The animation’s initial keyframe is applied as soon as the animation style is applied to an element, and the animation’s final keyframe continues to apply after the final iteration of the animation completes. The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay .

By default, an animation starts as soon as the style that describes the animation is applied to an element; however, the -webkit-animation-delay property can delay the start of an animation. Specifying a value of backwards or both for this property overrides the -webkit-animation-delay property and tells the animation to start as soon as the style is applied.

Available in Safari 5.0 and later.

Available in iOS 4.0 and later.

-webkit-animation-iteration-count

Specifies the number of times an animation iterates.

The number of iterations. If 1 , the animation plays from beginning to end once. A value of infinite causes the animation to repeat forever. Noninteger values cause the animation to end partway through an iteration. Negative values are invalid. The default value is 1 .

Repeats the animation forever.

This property is often used with a -webkit-animation-direction property set to alternate , which causes the animation to play in reverse on alternate iterations.

-webkit-animation-name

Specifies the name of an animation.

The name of the animation.

The name is used to select the -webkit-keyframe at-rule that provides the keyframes and property values for the animation. If the name does not match any -webkit-keyframe at-rule, there are no properties to be animated and the animation is not executed. See @-webkit-keyframes for a description of this rule.

If "none" , no animation is executed even if there is a -webkit-keyframe at-rule with that name. Setting this property to "none" explicitly disables animations.

The default value is "" .

-webkit-animation-play-state

Determines whether the animation is running or paused.

The state of an animation.

Plays the animation.

Pauses the animation.

A running animation can be paused by setting this property to paused . Set this property to running to continue running a paused animation. A paused animation continues to display the current value of the animation in a static state. When a paused animation is resumed, it restarts from the current value, not from the beginning of the animation.

The default value is running .

-webkit-animation-timing-function

Defines how an animation progresses between keyframes.

The function to apply between keyframes. The default value is ease .

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) .

Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0) .

Equivalent to cubic-bezier(0, 0, 0.58, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) .

Equivalent to steps(1, end) .

Available in iOS 5.0 and later.

Available in Safari 5.1 and later.

Equivalent to steps(1, start) .

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function. See Timing Functions for additional information about timing functions.

This property applies between keyframes, not over the entire animation. For example, for an ease-in-out timing function, an animation eases in at the start of the keyframe and eases out at the end of the keyframe. A -webkit-animation-timing-function defined within a keyframe block applies to that keyframe; otherwise, the timing function specified for the animation is used.

-webkit-backface-visibility

Determines whether or not a transformed element is visible when it is not facing the screen.

Determines whether or not the back face of a transformed element is visible. The default value is visible .

The element is always visible even when it is not facing the screen.

The element is invisible if it is not facing the screen.

Use this property to specify whether or not an element is visible when it is not facing the screen. For example, if the identity transform is set, an element faces the screen; otherwise, it may face away from the screen. For example, applying a rotation about y of 180 degrees in the absence of any other transforms causes an element to face away from the screen.

This property is useful when you place two elements back to back, as you would do to create a playing card. Without this property, the front and back elements could at times switch places during an animation to flip the card. Another example is creating a box out of six elements whose outside and inside faces can be viewed. This is useful when creating the backdrop for a three-dimensional stage.

-webkit-box-reflect

Defines a reflection of a border box.

The position of the reflection relative to the border box. Can be above , below , left , or right .

The distance of the reflection from the edge of the border box, in length units or as a percentage. The default value is 0 .

Used to overlay the reflection. If omitted, the reflection has no mask.

The reflection appears above the border box.

The reflection appears below the border box.

The reflection appears to the left of the border box.

The reflection appears to the right of the border box.

Reflections will update automatically as the source changes. Specifying a reflection has the effect of creating a stacking context (like opacity, masks, and transforms). The reflection is non-interactive, and as such, it has no effect on hit testing. The reflection has no effect on layout, other than being part of a container’s overflow; it is similar to -webkit-box-shadow in this respect.

-webkit-mask

Defines a variety of mask properties within one declaration.

See -webkit-mask-attachment for details.

See -webkit-mask-clip for details.

See -webkit-mask-origin for details.

See -webkit-mask-image for details.

See -webkit-mask-repeat for details.

See -webkit-mask-composite for details.

As with most composite properties, all arguments are optional.

-webkit-mask-attachment

Defines the scrolling or fixed nature of the image mask.

If fixed , the mask does not move when the page scrolls; if scroll , the image moves when the page scrolls.

-webkit-mask-box-image

Defines an image to be used as a mask for a border box.

The file path of the image.

The uri field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px ) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.

You can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch , or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

-webkit-mask-clip

Specifies whether the mask should extend into the border of a box.

The clipping behavior of the mask.

-webkit-mask-composite

Sets a compositing style for a mask.

The compositing style of the mask.

The default value is border , which means that the background extends into the border area. Specifying a value of padding limits the background so that it extends only into the padding area enclosed by the border.

-webkit-mask-image

Defines an image to be used as a mask for an element.

-webkit-mask-origin

Determines where the -webkit-mask-position property is anchored.

The origin of the mask position.

The mask’s position is anchored at the upper-left corner of the element’s border.

The mask’s position is anchored at the upper-left corner of the element’s content.

The mask’s position is anchored at the upper-left corner of the element’s padding.

-webkit-mask-position

Defines the position of a mask.

The x-coordinate of the position of the mask.

The y-coordinate of the position of the mask.

Position can be specified in terms of pixels or percentages of the viewport width or using the keywords top , left , center , right , or bottom .

Changes to this property can be animated in Safari 4.0 and later.

-webkit-mask-position-x

Defines the x-coordinate of the position of a mask.

-webkit-mask-position-y

Defines the y-coordinate of the position of a mask.

-webkit-mask-repeat

Defines the repeating qualities of a mask.

The repeating behavior of the mask.

This property controls whether tiling of an element’s mask should occur in the x direction, the y direction, both, or neither.

-webkit-mask-size

Overrides the size of a mask.

The width and height of the mask.

The width of the mask.

The height of the mask.

-webkit-perspective

Gives depth to a scene, causing elements farther away from the viewer to appear smaller.

The distance in pixels from the viewer’s position to the z= 0 plane. The default value is none .

No perspective transform is applied.

The -webkit-perspective property applies the same transform as the perspective(<number>) transform function, except that it applies only to the children of the element, not to the transform on the element itself.

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position:relative ), just as the -webkit-transform property does.

This transform alters the effect of other transforms. In the absence of additional transforms, this transform has no effect.

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

-webkit-perspective-origin

Sets the origin of the -webkit-perspective property described in -webkit-perspective .

The x-origin as a percentage or value.

The y-origin as a percentage or value.

Sets the y-origin to the top of the element’s border box.

Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right , specifies the y-origin. If it appears after top or bottom , specifies the x-origin. If appears alone, centers both the x and y origin.

Sets the y-origin to the bottom of the element’s border box.

Sets the x-origin to the left side of the border box.

Sets the x-origin to the right side of the border box.

This property effectively sets the x and y position at which the viewer appears to be looking at the children of the element. The default value is 50% for both x and y coordinates.

-webkit-transform

Specifies transformations to be applied to an element.

A transform function. Possible values are described in Transform Functions

No transforms are applied.

The -webkit-transform property specifies a list of transformations, separated by whitespace, to be applied to an element, such as rotation, scaling, and so on.

The set of transform functions is similar to those allowed by SVG, although there are additional functions to support 3D transformations. If multiple transforms are applied, the transform is generated by performing a matrix concatenation of each transform in the list.

For example, the following div element is rotated 45 degrees clockwise:

If a list of transforms is provided, the net effect is as if each transform is specified separately in the order provided.

The default value is none (no transforms applied).

Available in Safari 3.1 and later.

-webkit-transform-origin

Sets the origin for the -webkit-transform property.

The x origin as a percentage or value.

The y origin as a percentage or value.

Sets the y origin to the top of the element’s border box.

Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right , specifies the y origin. If this constant appears after top or bottom , specifies the x origin. If it appears alone, centers both the x and y origin.

Sets the y origin to the bottom of the element’s border box.

Sets the x origin to the left side of the border box.

Sets the x origin to the right side of the border box.

The -webkit-transform-origin property establishes the origin for transforms applied to an element with respect to its border box.

The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50% causes transformations to occur around the element’s center. Changing the origin to 100% 0% causes transformation to occur around the top-right corner of the element. The default value is 50% 50% .

If only one argument is provided, it is interpreted as the horizontal position.

Available in Safari 3.1 and Later.

-webkit-transform-origin-x

The x coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-y

The y coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-z

The z coordinate of the origin for transforms applied to an element with respect to its border box.

The z origin as a percentage or value.

-webkit-transform-style

Defines how nested, transformed elements are rendered in 3D space.

The transform style.

Flatten all children of this element into the 2D plane.

Preserve the 3D perspective.

If -webkit-transform-style is flat , all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the x or y axes causes children positioned at positive or negative z positions to appear on the element’s plane, rather than in front of or behind it. If -webkit-transform-style is preserve-3d , this flattening is not performed, so children maintain their position in 3D space.

This flattening takes place at each element, so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value preserve-3d for -webkit-transform-style . But -webkit-transform-style affects only an element’s children; the leaf nodes in a hierarchy do not require the preserve-3d style.

The default value is flat .

-webkit-transition

Combines -webkit-transition-delay , -webkit-transition-duration , -webkit-transition-property , and -webkit-transition-timing-function into a single property.

See -webkit-transition-property for details.

See -webkit-transition-duration for details.

See -webkit-transition-timing-function for details.

See -webkit-transition-delay for details.

-webkit-transition-delay

Defines when the transition starts.

The time to begin executing a transition after it is applied. If 0 , the transition executes as soon as the property changes. Otherwise, the value specifies an offset from the moment the property changes, and the transition delays execution by that offset. If the value is negative, the transition executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the transition. Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0 .

The transition begins immediately.

-webkit-transition-duration

Defines how long the transition from the old value to the new value should take.

If 0 , the transition is immediate (there is no animation). A negative value is treated as 0 . Nonzero values must specify a unit: s for seconds, ms for milliseconds. Negative values are invalid. The default value is 0 .

-webkit-transition-property

Specifies the name of the CSS property to which the transition is applied.

The name of the transition. You can list multiple properties. Property names should be bare, unquoted names. The default value is all .

No transition specified.

The default transition name.

-webkit-transition-timing-function

Specifies how the intermediate values used during a transition are calculated.

The timing function.

This property allows for a transition to change speed over its duration. These effects, commonly called easing functions, are mathematical functions that produce a smooth curve.

The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier function to specify your own points. See cubic-bezier for a description of the parameters for this function.

The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.

The default value is ease .

Generated Content, Automatic Numbering, and Lists

Embeds an arbitrary batch of content (such as a movie or a specially formatted string) to be embedded alongside a CSS property.

The file path of the content.

A function that procedurally generates an image, such as gradient .

counter-increment

Increments a numerical counter for auto-numbering.

The name of the counter.

The amount by which the counter increments.

This property is commonly used in conjunction with the content property to create section numbers or other auto-numbered containers. For example:

This snippet inserts “Section 1:” at the beginning of the first heading, “Section 2:” at the beginning of the second, and so on.

Important:  You must use the counter-reset property to reset the counter on some element that appears in the DOM tree prior to the first element where you use counter-increment on that counter. Otherwise, this call increments a nonexistent counter and all of your sections will be numbered "Section 1”.

counter-reset

Resets a counter used by the counter-increment property and the counter function.

For an example of this property, see the documentation for counter-increment .

Defines the display style for a list and list elements.

The type of list.

The position of the list marker.

The file path of an image to be used as the list marker.

list-style-image

List-style-position, list-style-type.

Defines an image to use as the opening symbol of a list element.

Defines the position of the marker of a list element.

The position of the marker.

The marker is placed inside the text. Wrapping text appears directly below the marker.

The text of the list item is indented from the marker.

Defines the type of marker of a list element.

The type of marker.

armenian , circle , cjk-ideographic , decimal , decimal-leading-zero , disc , georgian , hebrew , hiragana , hiragana-iroha , katakana , katakana-iroha , lower-alpha , lower-greek , lower-latin , lower-roman , none , square , upper-alpha , upper-latin , upper-roman

Paged Media

Defines the minimum number of lines in a paragraph that must be left at the bottom of a page (before a page break).

The number of lines.

Available in Safari 1.3 and later.

page-break-after

Defines the page break behavior following an element's definition.

The page break behavior.

always , auto , avoid , left , right

Safari 1.2 and later.

page-break-before

Defines the page break behavior before an element's definition.

page-break-inside

Defines the page break behavior within an element.

auto , avoid

Safari 1.3 and later.

Defines the minimum number of lines in a paragraph that must be left at the top of a page (after a page break).

Colors and Backgrounds

Defines a variety of background properties within one declaration.

The background color.

The file path of the background image.

The repeating behavior of the background image.

If fixed , the background image does not move when the page scrolls; if scroll , the image moves when the page scrolls.

The position of the background image.

background-attachment

Defines the scrolling or fixed nature of the page background.

scroll , fixed

background-color

Defines an element’s background color.

background-image

Defines an element’s background image.

background-position

Defines the origin of a background image.

The x-coordinate of the origin of the background image.

The y-coordinate of the origin of the background image.

background-position-x

Defines the x-coordinate of the origin of a background image.

background-position-y

Defines the y-coordinate of the origin of a background image.

background-repeat

Defines the repeating qualities of the background image.

This property controls whether tiling of an element’s background image should occur in the x direction, the y direction, both, or neither.

Defines the color of the text of an element.

The color. Colors can be specified with a constants, an RGB value, or a hexadecimal value.

-webkit-background-clip

Specifies the clipping behavior of the background of a box.

The clipping behavior of the background.

The background clips to the border of the box.

The background clips to the content of the box.

The background clips to the padding of the box.

The background clips to the text of the box.

-webkit-background-composite

Sets a compositing style for background images and colors.

The compositing style of the background.

Under development.

-webkit-background-origin

Determines where the background-position property is anchored.

The origin of the background position.

The background position can be anchored at the upper-left corner of the border, the upper-left corner of the padding area inside the border, or the upper-left corner of the content inside the padding area.

-webkit-background-size

Overrides the size of a background image.

The width and height of the background image.

The width of the background image.

The height of the background image.

Defines a variety of properties for an element’s text font within one declaration.

The style of the font.

The variant of the font.

The weight, or boldness, of the font.

The size of the font.

The distance between lines.

The family of the font.

The user interface style to replicate.

The style of the text of a standard size UI element, such as a button.

The style of the text of a miniature size UI element, such as a button.

The style of the text of a small size UI element, such as a button.

caption , icon , menu , message-box , small-caption , status-bar

In addition to declaring a font style explicitly by characteristics, you can also specify a user interface style using constants such as caption . These constants represent the default font style for the specified user interface element, and as such, their specific values are dependent on the browser, the operating system, and user configuration options.

Using the font property resets all related font properties that are not explicitly specified.

font-family

Defines a list of fonts for element styling or downloadable font definitions.

The font-family property has two different meanings, depending on context.

In the context of an element style, it defines a font to use for text within an element. Because not all computers have the same fonts available, this property to specify multiple acceptable fonts in descending order of preference. In addition, constants such as serif or sans-serif provide generic fallback fonts in case a browser does not have any of the listed fonts available.

In the context of a downloadable font definition, this property provides the name of the font that the font definition describes. In this form, you may specify multiple family names for the font, but generally only a single family name (optionally, specify that it should match against generic font names like serif ).

For more information about downloadable font definitions, see @font-face .

Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.

Defines the font size for the text in an element or in a downloadable font definition.

large , larger , medium , small , smaller , -webkit-xxx-large , x-large , x-small , xx-large , xx-small

Changes to this property can be animated in Safari 4.0 and later. For more information about downloadable font definitions, see @font-face .

Defines the font style for the text in an element or a downloadable font definition.

italic , normal , oblique

font-variant

Defines special font properties for the text in an element or for a downloadable font definition.

normal , small-caps

Available in Safari 1.0 and later. (The value small-caps is not supported.) Downloadable fonts supported in Safari 3.1 and later.

font-weight

Defines the font weight of the text in an element or for a downloadable font definition.

Integers, nonnegative values

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , bold , bolder , lighter , normal

Provides a list of locations for a downloadable font definition.

This property takes a comma-delimited list of font locations which may be locally installed font family names or HTTP URLs.

unicode-range

Describes the unicode characters supported by a downloadable font definition.

The range of supported characters.

The first character in a range of supported characters.

The last character in a range of supported characters.

This property takes a comma-delimited list of Unicode character ranges. There are two supported formats: singleton ranges and pair ranges.

A singleton range is in the form U+xxxx where xxxx is a hexadecimal number. For example, the range U+2150 indicates that Unicode character 0x2150 is supported. Leading zeroes may be omitted, so U+300 is the same as U+0300 . The following snippet shows a singleton range: unicode-range: U+2150;

A singleton range may also contain wildcards in the form of a question-mark character. For example, U+36?? contains two wildcard characters. This range matches any value in which the first two digits are 36 , without regard to the value for the last two digits. The following snippet shows a wildcard range that represents the Unicode characters 0x2160 through 0x216f, inclusive: unicode-range: U+216?;

A pair range is in the form of a hyphen-separated pair of hexadecimal values in the form U+xxxx-yyyy where xxxx and yyyy are hexadecimal numbers. For example, the following pair range represents the Unicode characters from 0x2164 through 0x2156 , inclusive: unicode-range: U+2154-2156;

letter-spacing

Defines the horizontal interletter spacing of characters within the text of an element.

The size of the character spacing.

Defines the alignment for inline content within an element.

The inline content alignment.

Text is aligned to the default alignment.

Text is aligned to the center.

Text is aligned to the left.

Text is aligned to the right.

center , end , justify , left , right , start

text-decoration

Defines special styling for text, such as underlines.

The type of decoration.

line-through , none , overline , underline

text-indent

Defines the amount to indent the first line of text within an element.

The amount to indent.

text-overflow

Controls overflow of non-wrapped text.

clip , ellipsis

This property controls how Safari displays text that exceeds the specified width of the enclosing paragraph if the overflow property is set to hidden and style rules or nowrap tags prevent the text from wrapping (or if a single word is too long to fit by itself).

text-shadow

Defines a variety of properties for an element’s text shadow within one declaration.

Although the CSS specification allows it, multiple shadows are not supported in Safari. Changes to this property can be animated.

text-transform

Defines a capitalization transformation for the text in an element.

The capitalization transformation.

capitalize , lowercase , none , uppercase

white-space

Defines how whitespace characters in an element are handled onscreen.

The policy for displaying whitespace in the element.

normal , nowrap , pre , pre-line , pre-wrap

Specifies the level of strictness when breaking lines of text in ideographic languages such as Chinese, Japanese, and Korean.

The level of strictness.

break-all , break-word , normal

word-spacing

Defines the amount of space between words.

The amount of spacing.

Specifies word-splitting behavior for wrapping lines that are too long for the enclosing box and contain no spaces.

The wrapping behavior.

break-word , normal

Available in Safari 2.0 and later.

-webkit-marquee

Defines properties for showing content as though displayed on an electronic marquee sign.

The direction of the marquee.

The distance the marquee moves in each increment

The number of times the marquee repeats.

The style of the marquee’s motion.

The scroll or slide speed of the marquee.

-webkit-marquee-direction

-webkit-marquee-increment, -webkit-marquee-repetition, -webkit-marquee-speed, -webkit-marquee-style.

Available in Safari 3.0 and later. (Called -khtml-marquee in Safari 2.0.)

Available in iOS 1.0.

Specifies the direction of motion for a marquee box.

The marquee moves from bottom to top.

The marquee moves in the default direction.

The marquee moves from right to left.

The marquee moves from left to right.

The marquee moves from top to bottom.

Available in Safari 3.0 and later. (Called -khtml-marquee-direction in Safari 2.0.)

Defines the distance the marquee moves in each increment.

The marquee moves a large amount in each increment.

The marquee moves a medium amount in each increment.

The marquee moves a small amount in each increment.

Available in Safari 3.0 and later. (Called -khtml-marquee-increment in Safari 2.0.)

Specifies the number of times a marquee box repeats (or infinite ).

The marquee repeats infinitely.

Available in Safari 3.0 and later. (Called -khtml-marquee-repetition in Safari 2.0.)

Defines the scroll or slide speed of a marquee box.

The distance term in the speed equation.

The time term in the speed equation.

Integers, time units, nonnegative values

The marquee moves at a fast speed.

The marquee moves at a normal speed.

The marquee moves at a slow speed.

This property can either take one speed parameter ( slow , for example) or a measure of distance and a measure of time separated by a slash ( / ).

Available in Safari 3.0 and later. (Called -khtml-marquee-speed in Safari 2.0.)

Specifies the style of marquee motion.

The marquee shifts back and forth.

The marquee does not move.

The marquee loops in its specified direction.

The marquee moves in its specified direction, but stops either when the entirety of its content has been displayed or the content reaches the opposite border of its box, whichever comes second.

The values scroll and slide both cause the content to start outside the box and move into the box, but if the value scroll is specified, the content stops moving once the last content is visible. The value alternate causes the content to shift back and forth within the box in the specified direction.

Available in Safari 3.0 and later. (Called -khtml-marquee-style in Safari 2.0.)

-webkit-text-fill-color

Specifies a fill color for text.

The fill color. Colors can be specified with a constant, an RGB value, or a hexadecimal value.

If not specified, the color specified by the color property is used. -webkit-fill-color is commonly used in combination with -webkit-text-stroke . Changes to this property can be animated.

-webkit-text-security

Specifies the shape to use in place of letters in a password input field.

The shape to use in place of letters.

A circle shape.

A disc shape.

No shape is used.

A square shape.

-webkit-text-size-adjust

Specifies a size adjustment for displaying text content in Safari on iOS.

The size at which to display text in Safari on iOS.

The text size is automatically adjusted for Safari on iOS.

The text size is not adjusted.

Apple extension—Safari on iOS only.

-webkit-text-stroke

Specifies the width and color of the outline (stroke) of text.

The width of the stroke.

The color of the stroke.

-webkit-text-stroke-color

-webkit-text-stroke-width.

This property is commonly used in combination with -webkit-text-fill-color .

Specifies the color of the outline (stroke) of text.

If not specified, the color specified by the color property is used. -webkit-text-stroke-color is commonly used in combination with -webkit-text-fill-color . Changes to this property can be animated.

Specifies the width for the text outline.

A medium stroke.

A thick stroke.

A thin stroke.

This property is significant only in combination with -webkit-text-stroke-color .

-webkit-line-break

Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.

The line-breaking setting.

The line breaks after white space.

A standard line-breaking rule.

Available in Safari 3.0 and later. (Called -khtml-line-break in Safari 2.0.)

-webkit-appearance

Changes the appearance of buttons and other controls to resemble native controls.

The appearance of the control.

The indicator that appears in a password field when Caps Lock is active.

Available in iOS 2.0 and later

button , button-bevel , caret , checkbox , default-button , listbox , listitem , media-fullscreen-button , media-mute-button , media-play-button , media-seek-back-button , media-seek-forward-button , media-slider , media-sliderthumb , menulist , menulist-button , menulist-text , menulist-textfield , none , push-button , radio , searchfield , searchfield-cancel-button , searchfield-decoration , searchfield-results-button , searchfield-results-decoration , slider-horizontal , slider-vertical , sliderthumb-horizontal , sliderthumb-vertical , square-button , textarea , textfield

The following constants are unsupported in Safari 4.0:

scrollbarbutton-down , scrollbarbutton-left , scrollbarbutton-right , scrollbarbutton-up , scrollbargripper-horizontal , scrollbargripper-vertical , scrollbarthumb-horizontal , scrollbarthumb-vertical , scrollbartrack-horizontal , scrollbartrack-vertical

-webkit-nbsp-mode

Defines the behavior of nonbreaking spaces within text.

The behavior of nonbreaking spaces.

Nonbreaking spaces are treated as usual.

Nonbreaking spaces are treated like standard spaces.

Available in Safari 3.0 and later. (Called -khtml-nbsp-mode in Safari 2.0.)

-webkit-rtl-ordering

Overrides ordering defaults for right-to-left content.

The order of the content.

Raw content is in mixed order (requiring a bidirectional renderer).

Right-to-left content is encoded in reverse order so an entire line of text can be rendered from left to right in a unidirectional fashion.

The distinction between these two character orders is normally handled automatically as a side effect of character set. This property allows you to override whether the browser should treat the content as being in logical or visual order.

-webkit-user-drag

Specifies that an entire element should be draggable instead of its contents.

The dragging behavior of the element.

The default dragging behavior is used.

The entire element is draggable instead of its contents.

The element cannot be dragged at all.

Available in Safari 3.0 and later. (Called -khtml-user-drag in Safari 2.0.)

-webkit-user-modify

Determines whether a user can edit the content of an element.

The user modification policy.

The content is read-only.

The content can be read and written.

The content can be read and written, but any rich formatting of pasted text is lost.

This is closely related to the contentEditable attribute.

Available in Safari 3.0 and later. (Called -khtml-user-modify in Safari 2.0.)

-webkit-user-select

Determines whether a user can select the content of an element.

The user selection policy.

The user can select content in the element.

The user cannot select any content.

The user can select text in the element.

Available in Safari 3.0 and later. (Called -khtml-user-select in Safari 2.0.)

Available in iOS 3.0 and later.

border-collapse

Defines the model of an element’s border.

collapse , separate

border-spacing

Defines the spacing between an element’s border and the content within.

The size of the spacing.

-webkit-border-horizontal-spacing

-webkit-border-vertical-spacing, caption-side.

Defines the side of a table on which its caption appears.

The side of the table that will have a caption.

bottom , left , right , top

empty-cells

Sets the border behavior for cells with no content.

The behavior for cells with no content.

hide , show

table-layout

Specifies whether to use automatic or fixed table layout.

If auto , layout is determined by all cells in the table; if fixed , layout is determined by the first row of content only.

auto , fixed

Automatic table layout, specified by the value auto , is the default table layout behavior. In this mode, the table layout is calculated based on the contents of every cell in every row of the table.

Fixed table layout, specified by the value fixed , is a faster (but more restrictive) layout behavior. In this layout mode, the layout of the table is calculated based only on the first row of tabular content (not including any heading rows). This mode allows the layout to be calculated much earlier in the page load process and greatly simplifies the calculations, but can cause content in later rows to overflow the table’s boundaries.

Defines the spacing between the horizontal portion of an element’s border and the content within.

The amount of horizontal spacing.

Length units, nonnegative values

Equivalent to the horizontal portion of the border-spacing property. Changes to this property can be animated.

Available in Safari 3.0 and later. (Called -khtml-border-horizontal-spacing in Safari 2.0.)

Defines the spacing between the vertical portion of an element’s border and the content within.

The amount of vertical spacing.

Equivalent to the vertical portion of the border-spacing property. Changes to this property can be animated.

Available in Safari 3.0 and later. (Called -khtml-border-vertical-spacing in Safari 2.0.)

-webkit-column-break-after

Determines whether a column break can and should occur after an element in a multicolumn flow layout.

The column break policy.

A column break is always inserted after the element.

A right column break is inserted after the element where appropriate.

Column breaks are avoided after the element.

A left column break is inserted after the element.

A right column break is inserted after the element.

-webkit-column-break-before

Determines whether a column break can and should occur before an element in a multicolumn flow layout.

A column break is always inserted before the element.

A right column break is inserted before the element where appropriate.

Column breaks are avoided before the element.

A left column break is inserted before the element.

A right column break is inserted before the element.

-webkit-column-break-inside

Determines whether a column break should be avoided within the bounds of an element in a multicolumn flow layout.

A right column break is inserted within the element where appropriate.

Column breaks are avoided within the element.

-webkit-column-count

Specifies the number of columns desired in a multicolumn flow.

The number of columns in the multicolumn flow.

The element has one column.

-webkit-column-gap

Specifies the space between columns in a multicolumn flow.

The width of the gap.

Columns in the element have the normal gap width between them.

-webkit-column-rule

Specifies the color, style, and width of the column rule.

The width of the column rule.

The style of the column rule.

The color of the column rule.

-webkit-column-rule-color

-webkit-column-rule-style, -webkit-column-rule-width.

The column rule appears in the middle of the column gap in a multicolumn flow layout.

Specifies the color of the column rule.

Specifies the style of the column rule.

The column rule has a dashed line style.

The column rule has a dotted line style.

The column rule has a double solid line style.

The column rule has a grooved style.

The column rule is hidden.

The column rule has an inset style.

The column rule has no style.

The column rule has an outset style.

The column rule has a ridged style.

The column rule has a solid line style.

Specifies the width of the column rule.

The column rule has a medium width.

The column rule has a thick width.

The column rule has a thin width.

-webkit-column-width

Specifies the width of the column in a multicolumn flow.

The width of the column.

Columns in the element are of normal width.

-webkit-columns

A composite property that specifies the width and number of columns in a multicolumn flow layout.

The width of each column.

The number of columns.

User Interface

Defines the cursor to display onscreen when the pointer is over an element.

The type of cursor.

An open hand cursor indicating the element can be grabbed.

A closed hand cursor indicating the element has been grabbed.

A zoom-in cursor.

A zoom-out cursor.

alias , all-scroll , auto , cell , col-resize , context-menu , copy , crosshair , default , e-resize , ew-resize , hand , help , move , n-resize , ne-resize , nesw-resize , no-drop , none , not-allowed , ns-resize , nw-resize , nwse-resize , pointer , progress , row-resize , s-resize , se-resize , sw-resize , text , vertical-text , w-resize , wait

Although the CSS specification allows it, Safari does not support custom cursors.

Available in Safari 1.2 and later.

Defines a variety of properties for an element’s outline (drawn outside the element’s border) within one declaration.

The color of the outline.

The style of the outline.

The width of the outline.

outline-color

Outline-style, outline-width.

Defines the color of an element’s outline.

outline-offset

Defines the offset of an element’s outline from its border.

The size of the offset.

Defines the style of an element’s outline.

Defines the width of an element's outline.

pointer-events

Defines the parts of an element that responds to pointer events, such as a click, mouse over, or hover.

The parts of the element that respond to pointer events.

The entire element responds to pointer events.

The element does not respond to pointer events.

Providing a value of none does not disable the Inspect Element option that appears when the element is Control-clicked, however the option may return the wrong element.

-webkit-box-align

Specifies the alignment of nested elements within an outer flexible box element.

The alignment of nested elements.

Elements are aligned with the baseline of the box.

Elements are aligned with the center of the box.

Elements are aligned with the end of the box.

Elements are aligned with the start of the box.

Elements are stretched to fill the box.

This property specifies the horizontal alignment if the box direction is vertical, and vice versa. This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-align in Safari 1.1 through Safari 2.0.)

-webkit-box-direction

Specifies the direction in which child elements of a flexible box element are laid out.

The layout direction.

Elements are laid out in the default direction.

Elements are laid out in the reverse direction.

This applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-direction in Safari 1.1 through Safari 2.0.)

-webkit-box-flex

Specifies an element’s flexibility.

The flexibility of the element.

Flexible elements can stretch or shrink to fit the size of the bounding box of their parent element. The amount of stretching or shrinkage of an element is determined by its flex value relative to the flex values of other elements within the same parent element.

This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/ .

Available in Safari 3.0 and later. (Called -khtml-box-flex in Safari 1.1 through Safari 2.0.)

-webkit-box-flex-group

Specifies groups of dynamically resizing elements that are adjusted to be the same size.

The group number of the flexible element.

During size adjustment of flex boxes, any boxes with the same group number are adjusted to be the same size.

Available in Safari 3.0 and later. (Called -khtml-box-flex-group in Safari 1.1 through Safari 2.0.)

-webkit-box-lines

Specifies whether a flexible box should contain multiple lines of content.

If multiple , the flexible box can contain multiple lines of content; if single , only one line is allowed.

The box can contain multiple lines of content.

The box can contain only one line of content.

Available in Safari 3.0 and later. (Called -khtml-box-lines in Safari 1.1 through Safari 2.0.)

-webkit-box-ordinal-group

Specifies a rough ordering of elements in a flexible box.

The ordinal group number of the element.

Elements with lower ordinal group values are displayed first.

Available in Safari 3.0 and later. (Called -khtml-box-ordinal-group in Safari 1.1 through Safari 2.0.)

-webkit-box-orient

Specifies the layout of elements nested within a flexible box element.

The orientation of elements nested in the flexible box.

Elements are oriented along the box’s axis.

Elements are oriented horizontally.

Elements are oriented along the inline axis.

Elements are oriented vertically.

Available in Safari 3.0 and later. (Called -khtml-box-orient in Safari 1.1 through Safari 2.0.)

-webkit-box-pack

Specifies alignment of child elements within the current element in the direction of orientation.

The alignment of child elements.

Child elements are aligned to the center of the element.

Child elements are aligned to the end of the element.

Child elements are justified with both the start and end of the element.

Child elements are aligned to the start of the element.

For elements whose children are aligned horizontally, a packing value of start indicates left alignment with extra space towards the right side, a value of end indicates right alignment with extra space to the left, a value of center indicates center alignment with extra space split evenly on either side, and a value of justify indicates that the outer elements should be aligned on the left and right, with space added evenly between the elements.

Similarly, for elements whose children are aligned vertically, a value of start indicates that the elements should be aligned to the top, a value of end indicates that the elements should be aligned to the bottom, and so on.

This property is similar to -webkit-box-align , which specifies alignment in the opposite direction from the direction of orientation.

Available in Safari 3.0 and later. (Called -khtml-box-pack in Safari 1.1 through Safari 2.0.)

-webkit-dashboard-region

Specifies the behavior of regions in a Dashboard widget.

No behavior is specified.

This property is described in more detail in Declaring Control Regions in Dashboard Programming Topics .

Available in Safari 3.0 and later. (Called -apple-dashboard-region in Safari 2.0.)

Apple extension—Dashboard only.

-webkit-overflow-scrolling

Specifies whether to use native-style scrolling in an overflow:scroll element.

The style of scrolling.

One finger scrolling without momentum.

Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).

The default value is auto .

-webkit-tap-highlight-color

Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.

The tapped link color.

This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.

Available in iOS 1.1.1 and later.

-webkit-touch-callout

Disables the default callout shown when you touch and hold a touch target.

The touch callout behavior.

On iOS, when you touch and hold a touch target such as a link, Safari displays a callout containing information about the link. This property allows you to disable that callout.

The current allowable values are none and inherit .

Additional Unsupported Properties

WebKit provides partial support for a number of properties that are not supported for developer use. This list may include:

Properties designed for Apple internal use, such as properties specific to the way Mail and other applications use WebKit.

Properties that are in a very early stage of development and are not really usable yet.

Properties that are used within WebKit itself and cannot be parsed in a CSS file.

Properties that are parsed for historical reasons, but that are not actually used.

Because these properties are unsupported, they are not documented in detail. However, they are listed here so that if you find them in the source code, in test cases, and so on, you will be able to determine their status.

WebKit-Specific Unsupported Properties

-webkit-border-fit

-webkit-font-size-delta

-webkit-highlight

-webkit-line-clamp

-webkit-match-nearest-mail-blockquote-color

-webkit-text-decorations-in-effect

-webkit-transition-repeat-count

Unsupported Properties from the CSS Specification

font-size-adjust —Describes the font aspect ratio to preserve proportionality in the event of font substitution. Unsupported CSS 2 property; removed in CSS 2.1; reintroduced in CSS 3.

font-stretch —Selects a normal, condensed, or extended variant of a font in an element or describes availability of these variants in a font definition. Declared in CSS 2.1/CSS 3.

marker-offset —Sets the offset of a marker (a bullet in a bulleted list, for example). Unsupported CSS 2 property; removed in CSS 2.1.

marks —Sets what type of crop marks to use on paged media. Unsupported CSS 2 property; removed in CSS 2.1.

page —Used for named page support. Unsupported CSS 2 property; removed in CSS 2.1.

quotes —Sets the quotation mark characters used for nested <q> tags.

size —Sets page dimensions for paged media. Unsupported CSS 2 property; removed in CSS 2.1.

speak-header —Sets whether a browser should speak the contents of the corresponding table heading cell before speaking the contents of each cell. Unsupported CSS 2 aural media property. Aural media deprecated in CSS 2.1. Property reintroduced in CSS 3

text-line-through —Composite property describing overstrike color, style, and mode. Declared in CSS 3.

text-line-through-color —Describes color for overstrike. Declared in CSS 3.

text-line-through-mode —Describes the mode for overstrike. Declared in CSS 3.

text-line-through-style —Describes the style for overstrike. Declared in CSS 3.

text-line-through-width —Describes the width for overstrike. Declared in CSS 3.

text-overline —Composite property describing overline color, style, mode, and width(like underline, but above the text). Declared in CSS 3.

text-overline-color —Describes the color of overline (like underline, but above the text). Declared in CSS 3.

text-overline-mode —Describes the mode of overline (like underline, but above the text). Declared in CSS 3.

text-overline-style —Describes the style of overline (like underline, but above the text). Declared in CSS 3.

text-overline-width —Describes the width of overline (like underline, but above the text). Declared in CSS 3.

text-underline —Composite property describing underline color, style, mode, and width. Declared in CSS 3.

text-underline-color —Describes the color of underline. Declared in CSS 3.

text-underline-mode —Describes the mode of underline. Declared in CSS 3.

text-underline-style —Describes the style of underline. Declared in CSS 3.

text-underline-width —Describes the width of underline. Declared in CSS 3.

Unsupported Properties Specific to Other Browsers

scrollbar-3dlight-color —Microsoft Internet Explorer property.

scrollbar-arrow-color —Microsoft Internet Explorer property.

scrollbar-darkshadow-color —Microsoft Internet Explorer property.

scrollbar-face-color —Microsoft Internet Explorer property.

scrollbar-highlight-color —Microsoft Internet Explorer property.

scrollbar-shadow-color —Microsoft Internet Explorer property.

scrollbar-track-color —Microsoft Internet Explorer property.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

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

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

  • 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

MUO

6 Tips to Improve Your Safari Experience on iPhone

A ccessing the internet on an iPhone is made simple by Safari, Apple's native web browser; it does a great job of getting you started, but there are several other features that you can leverage to enhance your user experience.

Below, we'll list some valuable tips you can use to get the most out of Safari on your iPhone. So, let's get started.

1. Modify the Start Page

The start page is the first element you usually run into when launching Safari—it's the default screen if you've not used the browser before or didn't leave any tabs open after your last session. And the first step you can take in improving your Safari experience is to customize it.

Customizing the start page involves changing the background image and choosing the sections (listed below) you want the app to show. We've added descriptions to help you understand a little more about each section.

  • Favorites : This section will show all your favorite websites and bookmarks which have been added to the Favorites section on your iPhone.
  • Frequently Visited : This is a collection of searches and websites you've frequented in recent months. The information is said to be a mix from all your Apple devices if you've enabled iCloud.
  • Shared with You : It works by finding links, images, music, and more, sent within the Messages app, and brings them up in relevant applications. For example, if someone texted you a link via iMessage, you'll find it in this section of the start page.
  • Privacy Report : This section surfaces information on the trackers used by websites you've visited in the last 30 days and showcases when your iPhone—and other Apple devices—prevented them from profiling you.
  • Siri Suggestions : You can find website suggestions based on your recent browsing history, bookmarks, and open tabs within this section if you choose to use them.
  • Reading List : You can find the three latest additions to your Reading List in this section, with a Show All button available in case you want to view the other articles you've added to your read later list.
  • iCloud Tabs : This feature showcases up to four most recent tabs open on each Apple device you own with iCloud enabled for Safari.

To begin customizing your Safari's start page, follow the steps listed below:

  • Scroll down to the bottom of the Safari start page and tap Edit.
  • Now, enable the desired sections using the toggles or reorder them by pressing (and dragging) the three horizontal lines.

If you want to experience Apple's Continuity feature , toggle on Use Start Page on All Devices at the top of the edit menu. This will ensure your start page is in sync across all devices connected to your iCloud account.

2. Create Tab Groups in Safari

The next step in improving Safari on iPhone is to create and use Tab Groups . The feature lets you bring order and control to tabs by allowing you to group similar ones—or those you often use together—into folders. Ideally, you can use the feature to separate search results and websites related to work from those you open during casual browsing.

To create a Tab Group, follow the steps listed below:

  • View all your tabs by tapping the Tab button in the bottom-right corner.
  • Now, tap the text box at the bottom of the screen—it mentions the number of tabs open.
  • In the menu that appears, tap New Empty Tab Group or the second option, New Tab Group with X Tabs .
  • Name the Tab Group according to your liking and hit Save .

The X in the second option will vary based on the number of tabs open when creating a Tab Group.

3. Use Safari Extensions

Like Chrome, you can install Safari extensions to improve your browsing experience. For those unaware, these are applications built for web browsers that bring additional functionality and make your life easier.

For example, you can install applications that scour the web for coupon codes and bring them up when you're making a purchase or add ones that help edit written content to ensure you aren't making silly errors.

Adding extensions to Safari on an iPhone is a bit different compared to installing and removing extensions in Safari on a Mac . To do this, follow the steps listed below:

  • Go to Settings > Safari on your iOS device.
  • On the next screen, find Extensions under the General subsection and tap on it.
  • You'll now see a list of extensions available. In case you see no options, tap More Extensions to visit the Safari Extensions store.

You may sometimes see options without having installed an extension before; these are present due to an application—that offers Safari extensions—installed on your iPhone from before.

Once you've installed an extension, activate it in Settings using the same steps above and then do the following:

  • Open Safari and tap the AA button in the address bar.
  • Now, tap Manage Extensions and select the extension you want to activate.

4. Choose Websites to Automatically Use Reader

Reader in Safari is a nifty add-on that lets you read content from a website with minimal distractions and no ads. It makes the experience quite simple and offers options like changing the page color, font, and font size.

Activating Reader is quite simple; tap the AA button in the address bar when you're on a supported webpage and choose Show Reader . However, if you frequently visit a specific website, you can configure Safari to load all its webpages in Reader. Here's what you need to do:

  • Open the desired website and tap the AA button.
  • In the context menu that appears, tap Website Settings .
  • Now, toggle on Use Reader Automatically . Each supported webpage will now open in Reader, making it easier to read the content.

5. Set Tabs to Open in Background

Despite it being easy to access AI tools like ChatGPT on mobile for learning about things, if you prefer getting deep into the weeds when doing research, you may want to view many of the following webpages in new tabs.

By default, opening a new tab via a hyperlink will leave the old tab behind and move you to the new tab. While this behavior is fine, it can feel like a chore if you'd like to open multiple results from a search page.

Fortunately, you can change this behavior. Here's what you need to do:

  • Open the Settings app, and scroll down to the Safari option.
  • On this page, under the Tabs subsection, tap on Open Links .
  • Now, choose In Background .

6. Configure Safari to Automatically Close Tabs

Lastly, while the ability to open many tabs in Safari is a boon, knowing ways to organize your browser and keeping it clutter-free can help you focus better and increase productivity. And keeping only a few tabs open can be a part of this regime.

Safari on iPhone also helps with this, with the ability to automatically close tabs after a set period of time; we've detailed the steps to activate the feature below:

  • On this page, under the Tabs subsection, tap on Close Tabs .
  • Now, choose from the available options: After One Day , After One Week , or After One Month .

Become a Safari Power User With These Changes

Each customization method listed above will help improve your Safari experience, be it with a new background image that makes the app feel more personal or a setting that keeps it clutter-free.

Overall, Safari is an excellent browser that can be made even better for power users with a few changes. And some of Apple's exclusive features make a strong case for the app, especially if you're a Mac user.

6 Tips to Improve Your Safari Experience on iPhone

Fix: iPhone Not Connecting to Network After 17.2.1 Update

Nick deCourville

  • You may want to avoid iOS 17.2.1 if you have yet to make the update.
  • This issue seems to affect a wide array of iPhones, including past generations like the iPhone 12.

iPhone Not Working 1721 Update January 2024 Featured

The iOS 17.2.1 update is causing problems for certain users, with some of these problems involving the iPhone not working or connecting to a network provider. Moreover, the update has become a critical issue for certain iPhone users. Fortunately, solutions are available. Let’s explore.

iPhone Not Connecting to Network After 17.2.1 Update

There are users reporting a critical error where they find their iPhone not connecting to network after 17.2.1 update. While this has been an easy fix for some users, others are reporting the update is causing them severe problems. Users are reporting that they are not receiving cellular connection after the update, and in certain cases, their iPhone started to overheat and experience battery drain.

Follow and consider the below steps to solve your iOS 17.2.1 issue. You may also want to know what to do if you are experiencing errors while installing iOS 17 .

1. Switch to the iOS Beta

Reports online suggest that one of the best solutions to this issue is to switch from iOS 17.2.1 to the iOS 17.3 beta. You may also experience bugs and issues while using an iOS Beta.

iPhone not working 17.2.1 Click Sign Up

  • Sign up for the Apple Beta Program using your Apple ID and password . The site will guide you through the process.

iPhone not working 17.2.1 Update Tap General

2. Delete Your VPN Profile

There are reports that deleting your VPN and then restarting your iPhone can solve your situation. If you use your iPhone for work, you should double-check your VPN settings even if you don’t personally use one, as certain professional apps, such as Microsoft InTune, may utilize one.

Time needed:  2 minutes

To delete your VPN, follow these steps:

iPhone not working 17.2.1 Update Tap General

3. Reset Network Settings

If you don’t have a VPN or the above solution didn’t work for you. You may want to try resetting your network settings.

iPhone not working 17.2.1 Update Tap Transfer or Reset iPhone

  • Confirm your decision.

4. Restore iPhone from Backup

If you have a backup of a previous version of iOS, you can restore your iPhone to that backup. Remember that you cannot create a new iCloud backup at this point, as you will still be on iOS 17.2.1. If you do need to restore your iPhone from a backup, check out our full guide here .

5. Talk to Apple Support and/or Your Service Provider

Unfortunately, one of the most effective solutions to this problem is speaking to your service provider and  replacing your eSIM or SIM card.  Consider  speaking with Apple Support  to see what they can do for you.

While few of these solutions are ideal, it’s important to realize that if you are experiencing these issues, the right solution may vary depending on your situation. Fortunately, Apple is expected to soon rollout iOS 17.3 and hopefully resolve this pertinent issue.

Leave a Reply Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

  • Nick deCourville

user select for safari

Happy toast

Using CSS to Control Text Selection

CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in!

Sometimes it’s nice to have all the text in an element automatically selected when you click on it. This is particularly handy for text that is copied/pasted in full (code snippets, one-time passwords, promotional codes, etc.).

You can accomplish this with some simple CSS. No JavaScript required!

Here’s a demo. Bad news, it doesn’t work on iOS. Good news, it degrades gracefully, so the text is still selectable.

See the Pen Select All by Will Boyd ( @lonekorean ) on CodePen .

Select All… Then Select Some

While this works as expected, you may notice something annoying: it is impossible to select anything less than the entire code snippet. Wouldn’t it be nice if the first click selected all, but you could still click again and select just a portion? CSS can do this.

First, use tabindex to make the element holding the text focusable. This gives the CSS a way to know when the element has been clicked.

Then comes the CSS.

The idea is to have user-select: all on the element initially, then switch to the “normal” user-select: text after the element has focus so that text can be freely re-selected. The tricky part is the timing. Do the switch immediately upon focus and user-select: all is gone before it has a chance to do its job. That’s where animation comes in.

Yes, user-select is animatable! More specifically, it is discretely animatable, meaning there is no gradual interpolated animation, but rather an immediate cut from one state to another. Armed with this knowledge, we can use animation to delay the change in select behavior until 100ms after focus. Perfect.

Again, the “select all” bit doesn’t work on iOS. Meanwhile, desktop Safari keeps the text as “select all”. This trick seems to work fine elsewhere, though.

See the Pen Select All... Then Select Some by Will Boyd ( @lonekorean ) on CodePen .

Preventing Text Selection

You can also use CSS to make text in an element unselectable.

This is probably a bad idea for body text, but I’ve found it useful for controls that might be toggled quickly or “rage clicked” in desktop browsers, since double clicking causes text to be selected and highlighted, which can look a little weird sometimes.

See for yourself in the following demo. Notice how the toggle on the left becomes highlighted when rapidly clicked, while the one on the right doesn’t.

See the Pen Preventing Text Highlights from Rage Clicking by Will Boyd ( @lonekorean ) on CodePen .

This technique also works on disclosure widgets . Fake buttons — like a <div> with a click handler on it — are another candidate. Bear in mind that using a real <button> is preferable, not only for semantics and accessibility, but also because text in a <button> is unselectable by default, avoiding the issue to begin with.

Selectively Selecting Text

Unselectable text can be mixed into selectable text. The unselectable bits are simply skipped over when text is selected and will be omitted when the selection is copied/pasted.

The demo below uses user-select: none on the numerical footnote markers. So when you copy/paste, the markers are automatically removed for you.

See the Pen Declaring Bits of Unselectable Text by Will Boyd ( @lonekorean ) on CodePen .

Sadly, some browsers won’t play along. Safari (iOS and desktop) and Android Chrome will still copy the markers.

Styling the Selection

You can style text selections by targeting the ::selection pseudo-element. However, your options are limited to 3 properties: color , background-color , and text-shadow (there are more defined in the spec , but browsers don’t support them).

Here’s an example that styles the selected text in a <p> .

Try selecting some text in the demo below to see the result. Unfortunately, iOS is the holdout once again, but everyone else should see fancier colors.

See the Pen Styling Text Selections by Will Boyd ( @lonekorean ) on CodePen .

Odds and Ends

There’s another declaration, user-select: contain , that is supposed to confine text selections to within an element, like you’d see with a <textarea> . Oddly enough, IE11 was the last browser to support it. No modern browsers support it currently.

That said, all editable elements (such as <textarea> ) are treated as if they had user-select: contain . And the ::before and ::after pseudo-elements are unselectable, as if they had user-select: none . You cannot override these behaviors.

Going Further

This article is about CSS, but I would be remiss if I didn’t mention the relevant JavaScript.

If you want full control over text selections, with the ability to create and modify them at will, then check out the JavaScript Selection API . If the end goal is to copy/paste text, then you should know that JavaScript also allows you to interact with the clipboard .

Select Product

Citrix Workspace app for Mac

About this release

Features in Technical Preview

Native support for Mac with Apple Silicon (M1 and M2 series)

System requirements and compatibility

Install, uninstall, and upgrade

Mobile Device Management

Store configuration

Security and authentication

Authenticate

Secure communications

App experience

Application delivery

Enhanced virtual apps and desktops launch experience for Workspace (Cloud users only)

App preferences

Data collection and monitoring

HDX and mulitmedia

Graphics and Display

Optimized Microsoft Teams

HDX transport

Audio and Microphone

Client drive-mapping

Session experience

Troubleshooting

Deprecation

This content has been machine translated dynamically.

Dieser Inhalt ist eine maschinelle Übersetzung, die dynamisch erstellt wurde. (Haftungsausschluss)

Cet article a été traduit automatiquement de manière dynamique. (Clause de non responsabilité)

Este artículo lo ha traducido una máquina de forma dinámica. (Aviso legal)

此内容已经过机器动态翻译。 放弃

このコンテンツは動的に機械翻訳されています。 免責事項

이 콘텐츠는 동적으로 기계 번역되었습니다. 책임 부인

Este texto foi traduzido automaticamente. (Aviso legal)

Questo contenuto è stato tradotto dinamicamente con traduzione automatica. (Esclusione di responsabilità))

This article has been machine translated.

Dieser Artikel wurde maschinell übersetzt. (Haftungsausschluss)

Ce article a été traduit automatiquement. (Clause de non responsabilité)

Este artículo ha sido traducido automáticamente. (Aviso legal)

この記事は機械翻訳されています. 免責事項

이 기사는 기계 번역되었습니다. 책임 부인

Este artigo foi traduzido automaticamente. (Aviso legal)

这篇文章已经过机器翻译. 放弃

Questo articolo è stato tradotto automaticamente. (Esclusione di responsabilità))

Translation failed!

  • Session reliability and auto client reconnect

Session reliability keeps sessions active and on the user’s screen when network connectivity is interrupted. Users continue to see the application that they’re using until network connectivity resumes.

With session reliability, the session remains active on the server. To indicate that connectivity is lost, the user’s display freezes until connectivity resumes on the other side of the tunnel. Session reliability reconnects users without reauthentication prompts.

Important Citrix Workspace app for Mac users can’t override the server setting. With Session reliability enabled, the default port used for session communication switches from 1494 to 2598.

You can use session reliability with Transport Layer Security (TLS).

Note: TLS encrypts only the data sent between the user device and Citrix Gateway.

Using session reliability policies

The session reliability connections policy setting allows or prevents session reliability.

The session reliability timeout policy setting has a default of 180 seconds, or three minutes. Though you can extend the time the session reliability keeps a session open, this feature is convenient to the user. Therefore, it does not prompt the user for reauthentication.

Tip Extending session reliability timeouts might cause a user to get distracted and walk away from the device, leaving the session accessible to unauthorized users.

By default, incoming session reliability connections use port 2598, unless you change the port number in the session reliability port number policy setting.

You can configure the Auto client reconnect authentication policy setting to prompt users to reauthenticate when reconnecting to interrupted sessions.

If you use both session reliability and auto client reconnect, the two features work in sequence. Session reliability closes, or disconnects, the user session after the amount of time you specify in the Session reliability timeout policy setting. After that, the auto client reconnect policy settings take effect, attempting to reconnect the user to the disconnected session.

Note: Session reliability is enabled by default at the server. To disable this feature, configure the policy managed by the server.

Configuring session reliability from Citrix Studio

By default, session reliability is enabled.

To disable session reliability:

  • Launch Citrix Studio.
  • Open the Session Reliability connections policy.
  • Set the policy to Prohibited .

Session reliability 2

Configuring session reliability timeout

By default, the session reliability timeout is set to 180 seconds.

Note: Session reliability timeout policy can be configured only with XenApp and XenDesktop 7.11 and later.

To modify session reliability timeout:

  • Open the Session reliability timeout policy.
  • Edit the timeout value.

Configuring auto client reconnection using Citrix Studio

By default, auto client reconnection is enabled.

To disable auto client reconnection:

  • Open the Auto client reconnect policy .

Auto client reconnection

Configuring Auto client reconnection timeout

By default, the Auto client reconnection timeout is set to 120 seconds.

Note: Auto client reconnect timeout policy can be configured only with XenApp and XenDesktop 7.11 and later.

To modify auto client, reconnect timeout:

  • Open the Auto client reconnect policy.
Limitations: On a Terminal Server VDA, Citrix Workspace app for Mac uses 120 seconds as the timeout value irrespective of the user settings.

Configuring the Reconnect user interface Transparency

The Session User Interface is displayed during a session reliability and auto client reconnect attempts. The Transparency level of the user interface can be modified using Studio policy.

By default, Reconnect UI Transparency is set to 80%.

To modify Reconnect user interface Transparency level:

  • Open the Reconnect UI Transparency level policy.
  • Edit the value.

Auto client reconnect and session reliability interaction

There are mobility challenges associated with switching between various access points, network disruptions, and display timeouts related to latency. These create challenging environments when trying to maintain link integrity for active Citrix Workspace app for Mac sessions. Citrix enhanced session reliability and auto reconnection technologies resolve this issue.

This feature allows users to reconnect to sessions automatically after recovery from network disruptions. These features, enabled by policies in Citrix Studio, can be used to improve the user experience.

Note: Auto client reconnection and session reliability timeout values can be modified using the default.ica file in StoreFront.

Auto client reconnection

Auto client reconnection can be enabled or disabled using Citrix Studio policies. By default, this feature is enabled. For information about modifying this policy, see the auto client reconnection section earlier in this article.

Use the default.ica file in StoreFront to modify the connection timeout for AutoClienreconnect. By default, this timeout is set to 120 seconds (or two minutes).

Session reliability

Session reliability can be enabled or disabled using Citrix Studio policies. By default this feature is enabled.

Use the default.ica file in StoreFront to modify the connection timeout for session reliability. By default this timeout is set to 180 seconds (or three minutes).

How auto client reconnection and session reliability work

When auto client reconnection and session reliability are enabled for a Citrix Workspace app for Mac, consider the following:

  • A session window is grayed out when a reconnection is in progress. A countdown timer displays the amount of time remaining before the session is reconnected. Once a session is timed out, it’s disconnected.

By default, the reconnect countdown notification starts at 5 minutes. This timer value represents the combined default values for each of the timers (auto client reconnection and session reliability), 2 and 3 minutes respectively. The following image illustrates the countdown notification which appears in the upper right portion of the session interface:

Reconnect tr

Tip You can alter the grayscale brightness used for an inactive session using a command prompt. For example, defaults write com.citrix.receiver.nomas NetDisruptBrightness 80 . By default, this value is set to 80. The maximum value can’t exceed 100 (indicates a transparent window) and the minimum value can be set to 0 (a fully blacked out screen).
  • Users are notified when a session successfully reconnects (or when a session is disconnected). This notification appears in the upper right portion of the session interface:

Reconnect success

  • A session window which is under auto client reconnect and session reliability control provides an informational message indicating the state of the session connection. Click Cancel Reconnection to move back to an active session.
  • Service continuity

Service continuity removes or minimizes the dependency on the availability of components that are involved in the connection process. Users can launch their virtual apps and desktops regardless of the health status of the cloud services.

For more information, see the Service continuity section in the Citrix Workspace documentation.

  • Support for service continuity in the Safari browser

Starting with the 2206.1 version, the Citrix Workspace service continuity feature is supported for the Safari browser. Users must install Citrix Workspace app for Mac and the Citrix Workspace web extension. Service continuity removes (or minimizes) the dependency on the availability of the components involved in the connection process. It allows you to connect to your virtual apps and desktops regardless of the cloud services’ health status. For more information about the service continuity feature, see section Service continuity .

  • Enhancement to Permanent Client Access License (CAL) for Remote Desktop Sessions

Starting with the 2204 version, if you’re running CAL in your environment to access remote desktops, when the client ID is greater than 15 characters, you can launch the remote desktop session with a permanent license.

To enable this feature, admins must configure the default.ica file by doing the following:

  • In the StoreFront server, navigate to C:\inetpub\wwwroot\Citrix<StoreName>\App_Data and open the default.ica file with any editor.
  • Add the following lines in the [WFClient] section:

isRDSLicensingEnabled=On

In this article

This Preview product documentation is Citrix Confidential.

You agree to hold this documentation confidential pursuant to the terms of your Citrix Beta/Tech Preview Agreement.

The development, release and timing of any features or functionality described in the Preview documentation remains at our sole discretion and are subject to change without notice or consultation.

The documentation is for informational purposes only and is not a commitment, promise or legal obligation to deliver any material, code or functionality and should not be relied upon in making Citrix product purchase decisions.

If you do not agree, select Do Not Agree to exit.

Do you want to switch to the website in your browser preferred language?

Edit Article

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:

Screenshot of the right sidebar of twitter.com, circa Jan 2021.

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.

Screenshot of Safari’s preferences pane where you can select 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" .

Screenshot of twitter.com in Safari with the developer tools open and targeting a parent DOM node of the right sidebar.

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"] .

Screenshot of twitter.com in Safari with the developer tools open and targeting a parent DOM node of the right sidebar.

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.

Screenshot of twitter.com in Safari with a custom style sheet applied that hides the sidebar and the DM widget in the bottom right.

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!

ncesc-geographic-faq

How do I change Safari to Apple Maps?

geographic-faq

To change Safari to Apple Maps as your default map app, follow these steps:

  • Open the Settings app on your iPhone or iPad.
  • Scroll down and tap on Safari.
  • Tap on Search Engine.
  • Select Apple Maps from the list of options.
Note: This will only change the default map app for Safari. Other Apple apps may still use Safari or other map apps as their default.

Why can’t I change it if I use Safari or any other Apple apps?

If you use Safari or any other Apple apps, you won’t be able to change the default map app. Apple prefers its own services, including Apple Maps, for its own apps.

Can I choose a default map app if I use Chrome?

If you use Google Chrome as your web browser, you have the option to choose a default map app. You can select Apple Maps as your default map app in Chrome’s settings.

How do I make Apple Maps my default in Safari?

Unfortunately, there is no direct method available to set Apple Maps as the default map app in Safari. However, you can try the following workaround:

  • Delete any other map apps, such as Google Maps, from your device.
  • Open Safari and try to use a map-related feature, such as searching for directions.
  • Force Safari to use Apple Maps by selecting it as the default map app when prompted.

Why does Safari use Google Maps instead of Apple Maps?

The default map used by Safari depends on the search engine set in your browser settings. If Safari has Google set as the search engine, it will use Google Maps to display addresses and directions. However, if you use a different search engine like DuckDuckGo, it may use Apple Maps as the default map app.

Why does my Safari keep going to Google Maps?

Safari may keep going to Google Maps because it is set as the default map app in your browser settings. To change this, you can try the following steps:

  • Open Safari on your device.
  • Go to Safari Preferences.
  • Click on the Search tab.
  • Choose a different search engine as your default, such as DuckDuckGo or Bing.

How do I get to Apple map settings?

To access the Maps settings in Apple Maps, follow these steps:

  • Open the Maps app on your device.
  • Tap on the menu button (usually represented by three lines).
  • Scroll down and tap on “Settings”.

How to Change Maps to Google Maps in iPhone (tutorial)

Unfortunately, there is no direct way to change the default map app from Apple Maps to Google Maps on an iPhone. However, you can use Google Maps as your primary map app by downloading the Google Maps app from the App Store and using it instead of Apple Maps.

How do I get my Apple map back on my iPhone?

If you accidentally deleted the Apple Maps app from your iPhone, you can easily restore it by following these steps:

  • Open the App Store on your iPhone.
  • Search for “Maps” in the App Store.
  • Find the official Maps app from Apple and tap on it.
  • Tap on the “Get” or the cloud icon to download and install the app.
  • Once the app is installed, you can find it on your home screen and use it as before.

Can I change the default map on iPhone?

While iOS 14 and newer iPhones allow you to set some default apps like mail and web browser, you cannot change the default map app. Apple recommends using Apple Maps as the default map app on its devices. However, you can use Google Maps as your default map app if you download and use it instead of Apple Maps.

How do I stop Safari from going to Google?

If you want to stop Safari from using Google as the default search engine, you can follow these steps:

  • Open Safari on your iPhone or iPad.
  • Choose a different search engine, such as DuckDuckGo or Bing, as your default.

How do I stop Safari from defaulting to Google?

If you want to change the default search engine in Safari to something other than Google, you can follow these steps:

  • Select a different search engine from the available options, such as DuckDuckGo or Bing.

How do I convert Google Maps to Apple Maps?

If you want to switch from Google Maps to Apple Maps, you can export your saved locations from Google Maps and import them into Apple Maps. Here’s how:

  • Go to takeout.google.com and select the Maps (your places) option.
  • Click on the “Next” button to proceed with the export.
  • Wait for the export to complete and download the file containing your saved locations.
  • Open Apple Maps on your device.
  • Import the downloaded file into Apple Maps to have your saved locations available in the app.

Why is Apple Maps so much better than Google Maps?

Apple Maps has improved significantly over the years and now offers many features comparable to Google Maps. One of the reasons why some users prefer Apple Maps is its cleaner user interface. It is considered to be easier on the eyes and provides a seamless experience within the Apple ecosystem.

What is the default map app on iPhone?

The default map app on iPhone is Apple Maps. It has been the default map app since the release of iOS 6 when Apple replaced Google Maps with its own mapping service.

How do I change Safari to default on iPhone?

If you want to set Safari as your default web browser on iPhone, follow these steps:

  • Open the Settings app on your iPhone.
  • Tap on Default Browser App.
  • Select Safari as the default browser app.

How do I change the default app to open Maps?

If you want to change the default app to open maps, you can follow these steps on an Android device:

  • Open the Settings app on your Android device.
  • Select Apps or Applications.
  • Tap on the app whose default map you want to change.
  • Tap on “Open by default” or “Set as default”.
  • Choose a different app as your default map app.

Why does Safari on iPhone default to Google?

Safari on iPhone defaults to Google as the search engine because Apple does not have its own search engine. Google is a popular and widely used search engine, so Apple utilizes it as the default search engine for Safari. However, you have the option to change the default search engine in Safari’s settings.

How do I turn off Safari as my default browser?

To turn off Safari as your default browser, you can follow these steps:

  • Scroll down and tap on the browser app you want to set as the default.
  • Tap on “Default Browser App”.
  • Select a different browser app from the list of options.

How do I change Safari settings?

To change Safari settings on your iPhone or iPad, follow these steps:

  • Open the Settings app on your device.
  • Adjust the settings according to your preferences, such as privacy settings, search engine settings, and content blocking.

Is Apple Maps as good as Google Maps?

Apple Maps has significantly improved over the years and now offers a comparable experience to Google Maps. However, Google Maps still tends to have better navigation accuracy and a more extensive database. Apple Maps is a great choice for Apple users who prefer a seamless experience within the Apple ecosystem.

How do you use Apple Maps?

To use Apple Maps on your iPhone or iPad, follow these steps:

  • Enter your destination in the search bar.
  • Select the desired result from the search results.
  • Tap on “Directions” to get turn-by-turn directions.
  • Follow the on-screen instructions to reach your destination.

How do I change the default app on my iPhone?

To change the default app on your iPhone, follow these steps:

  • Install the app you want to set as the default from the App Store.
  • Scroll down and select the app you want to change the default for.
  • Tap on “Default App” or a similar option.
  • Select the desired app from the list of available apps.

What happened to my Apple map guides?

If you are missing your Apple Map guides, there are a few possible solutions:

  • Make sure the Maps feature is enabled for your iCloud account in the Settings app.
  • Check that you are signed in with the correct Apple ID on your iPhone.
  • Try signing out of iCloud and signing back in.

How do I reset Apple Maps?

If you want to reset Apple Maps to its default settings, you can try the following steps:

  • Delete the Maps app from your device.
  • Restart your device.
  • Reinstall the Maps app from the App Store.
  • Go to the Settings app and navigate to the Privacy section.
  • Tap on Location Services and make sure it is enabled for the Maps app.

Is Apple Maps only for iOS?

No, Apple Maps is

Overview of language requirements for manufacturers of medical devices

Description.

The Commission and Member States have created MDR and IVDR tables.

These tables aim to help manufacturers of medical devices and in vitro diagnostic medical devices, particularly small and medium-sized ones, understand the language requirements for the information and instructions that accompany a device in a specific country. The tables provide an overview of the language requirements for each Member State.

Graphic User Interface (GUI)

The last column of the tables includes the language requirements about the graphic user interface (GUI) (e.g., apps). There is no specific article foreseen in MDR/IVDR, but some countries have their own national legislation and rules about GUIs.

Example of a GUI

External readout devices can be used to make screenshots and provide examples of a GUI, e.g., saving screenshots from a device for brain pressure measurement.

The saving function is included on the GUI's "Save" button.

All the information about the "Save" function is already included in the language of the country where the device is used and does not need to be translated. An image (an icon for saving) could also be used instead of the button, whose function would then be explained in the instructions for use (IFU).

Share this page

user select for safari

Get started with Copilot Pro

Supercharge your creativity and productivity

First time using Copilot?

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

Meet Microsoft Copilot

Get familiar with Copilot and how it can help you be more productive and creative.

What you can do with Microsoft Copilot

Learn how Copilot can make it easier to create, edit, understand, and more.

Start using Microsoft Copilot

Learn how to use Copilot in your new and existing documents, presentations, and more.

What Copilot Pro can do?

Copilot Pro

Get things done faster with premium AI features

Get priority access to GPT-4 and GPT-4 Turbo during peak usage times for faster answers and content creation.

Copilot Pro

Create even better images

With 100 boosts per day, you can experience AI image creation with DALL-E 3 and create images in landscape format for more creative flexibility.

Try image creation

Graphic image shows Microsoft 365 Copilot in Word user interfaces.

Write documents with confidence

Copilot Pro in Word* generates drafts, summarizes, and helps you rewrite your content.

More on Copilot in Word

Graphic image shows Microsoft 365 Copilot in PowerPoint user interfaces.

Elevate your presentations

Copilot Pro in Powerpoint* helps you generate outlines, design slides, and organize content for the perfect story.

More on Copilot in PowerPoint

Graphic image shows Microsoft 365 Copilot in Outlook user interfaces.

Streamline your inbox

Copilot Pro in Outlook* summarizes long threads, offers suggested replies, and helps you draft emails with the right tone.

More on Copilot in Outlook

Copilot in OneNote

Get organized with improved notetaking

Copilot Pro in OneNote* helps you create, organize, rewrite, summarize, and search within your lists and notes.

More on Copilot in OneNote

FAQ about Copilot in Excel

Compile data in less time

Copilot Pro in Excel* helps you generate formulas, analyze and summarize data, and add helpful visuals to spreadsheets.

More on Copilot in Excel

Try these prompts

Show me a birthday cake recipe with dairy alternatives.

Try in Word Get tips on Copilot prompts

Add a relevant image to this slide.

Try in PowerPoint Get tips on Copilot prompts

Explain this document in three sentences.

What is a readable font size for a PowerPoint presentation?

More questions?

Microsoft Copilot logo

How to buy Copilot Pro

Find Copilot Pro plan and pricing to supercharge your creativity and productivity.

Get Copilot Pro

Image shows a laptop with Microsoft Copilot running.

Copilot Pro overview

Learn more about Copilot Pro and how to start using it in Microsoft 365 apps.*

Get overview

Image shows various prompts and profile pictures floating around.

Copilot Pro and your privacy

Find out how Copilot uses your data in Microsoft 365 apps.*

Graphic image shows layers with glowing in multiple colors.

Supported languages in Copilot Pro

Find what languages are supported in Copilot Pro.

View supported languages

More support options

Contact support.

Find solutions to common problems, or get help from a support agent.

Join the discussion

Get answers from our community of experts.

Ask the community

Get help with Copilot license

Learn about Copilot Pro availability in your apps.

Get help with Copilot subscription

Learn about cancellation and refund policies.

*A Microsoft 365 Personal or Family subscription is required to access Copilot in select apps, including Word, Excel, PowerPoint, OneNote, and Outlook. Excel features are currently in preview in English only.

You can access Copilot Pro via the Copilot app on the web, and in select Microsoft 365 apps on Windows, and soon on macOS and iPadOS. On these platforms, you can use Copilot Pro benefits in apps like Bing, Edge, and Start. For OneNote users Copilot Pro benefits will only be visible in Windows.

IMAGES

  1. How to Change User-Agents in Chrome, Edge, Safari & Firefox

    user select for safari

  2. How to Get a 'Select All' Button for Webpages in Safari on Your iPhone

    user select for safari

  3. How to Change the Safari Home Page on a Mac

    user select for safari

  4. How to Change Your Homepage in Safari

    user select for safari

  5. 9 Safari Settings You Should Change for a Better Browsing Experience

    user select for safari

  6. Viewing the source code for a webpage under Safari and changing the

    user select for safari

VIDEO

  1. You use Safari browser?! Do this now. #shorts #applesafari #macbookpro #macios

  2. How to change the home page in Safari

  3. iPhone Safari Trick 😲🙉 Listen to Page #iphonetricks

  4. How to install SAFARI on WINDOWS

  5. How to Create New Profile for Safari Browser in iOS 17 on iPhone

  6. How To Put Restrictions On Safari

COMMENTS

  1. how to make user-select work for Safari browser

    1 Answer Sorted by: 12 It seems that Safari needs this line also: -webkit-user-select: text; So it's working now with this code: ol.linenums li code { user-select: all; -webkit-user-select: text; /* Safari fallback only */ -webkit-user-select: all; /* Chrome/Safari */ -moz-user-select: all; /* Firefox */ -ms-user-select: all; /* IE10+ */ }

  2. user-select

    Syntax css user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* Global values */ user-select: inherit; user-select: initial; user-select: revert; user-select: revert-layer; user-select: unset;

  3. user-select Browser Compatibility On Safari

    user-select property shows High browser compatibility on Safari browsers. High browser compatibility means the user-select property is Fully Supported by a majority of Safari browser versions. Christmas Deal is on: Save 25% off on select annual plans for 1st year. Use Coupon Code: LTNEWEXCL.

  4. 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. .row-of-icons { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ }

  5. CSS user-select property

    The 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. Browser Support The numbers in the table specify the first browser version that fully supports the property.

  6. Browser Compatibility of user-select on Safari 12

    user-select is Fully Supported on Safari 12. Checkout overall cross browser compatibility of user-select on Safari 12. Platform . Online Browser Testing. Manual live-interactive cross browser testing. Selenium Testing. Run Selenium scripts on cloud-based infrastructure. Cypress Testing.

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

    3 min read. 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.

  8. User-select

    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.

  9. Supported CSS Properties

    The user can select content in the element. none. The user cannot select any content. text. The user can select text in the element. Availability. Available in Safari 3.0 and later. (Called -khtml-user-select in Safari 2.0.) Available in iOS 3.0 and later. Support Level. Apple extension. Tables border-collapse. Defines the model of an element ...

  10. The CSS user-select Property

    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.

  11. "user-select"

    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.

  12. user-select

    Supported only in Internet Explorer. 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.

  13. 6 Tips to Improve Your Safari Experience on iPhone

    2. Create Tab Groups in Safari . The next step in improving Safari on iPhone is to create and use Tab Groups. The feature lets you bring order and control to tabs by allowing you to group similar ...

  14. Disable Text Selection with CSS

    -webkit-user-select is for Chrome, Safari and Opera (there's no need for -o-user-select) An unprefixed version of the user-select property was purposely left out. The -webkit-touch-callout property disables the callouts that pop up during touch events (on iOS and Android). See following image for reference. Demo View demo

  15. Fix: iPhone Not Connecting to Network After 17.2.1 Update

    Time needed: 2 minutes To delete your VPN, follow these steps: From your iPhone, go to Settings.. Tap General.. Scroll down and select VPN & Device Management.. Click VPN.. Select Your VPN.. Tap ...

  16. Using CSS to Control Text Selection

    The idea is to have user-select: all on the element initially, then switch to the "normal" user-select: text after the element has focus so that text can be freely re-selected. The tricky part is the timing. Do the switch immediately upon focus and user-select: all is gone before it has a chance to do its job. That's where animation comes ...

  17. Session experience

    With session reliability, the session remains active on the server. To indicate that connectivity is lost, the user's display freezes until connectivity resumes on the other side of the tunnel. Session reliability reconnects users without reauthentication prompts. Important. Citrix Workspace app for Mac users can't override the server setting.

  18. CSS user-select Property

    The user-select property specifies whether or not the user can select text. The default value is "auto" which is determined as follows: On the ::before and ::after pseudo elements, the computed value is "none" If the element is an editable element, the computed value is "contain",

  19. Custom Style Sheets in Safari

    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.

  20. I don't see Copilot in my apps or am getting license validation errors

    Copilot will only work inside of documents that are associated with user accounts for which you have a Copilot license. Make sure you are logged into Microsoft 365 with an account that is licensed for Copilot, and that the current document is associated with that account.

  21. How do I change Safari to Apple Maps?

    Force Safari to use Apple Maps by selecting it as the default map app when prompted. Why does Safari use Google Maps instead of Apple Maps? The default map used by Safari depends on the search engine set in your browser settings. If Safari has Google set as the search engine, it will use Google Maps to display addresses and directions.

  22. Overview of language requirements for manufacturers of medical devices

    The Commission and Member States have created MDR and IVDR tables.. These tables aim to help manufacturers of medical devices and in vitro diagnostic medical devices, particularly small and medium-sized ones, understand the language requirements for the information and instructions that accompany a device in a specific country.

  23. appearance

    For the following keywords, the user agent selects the appropriate styling based on the element. Some examples are provided, but the list is not exhaustive. none. Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded. auto. Acts as none on elements with no special styling. <compat ...

  24. Get started with Microsoft Copilot Pro

    You can access Copilot Pro via the Copilot app on the web, and in select Microsoft 365 apps on Windows, and soon on macOS and iPadOS. On these platforms, you can use Copilot Pro benefits in apps like Bing, Edge, and Start. For OneNote users Copilot Pro benefits will only be visible in Windows.

  25. html

    As of this date, Safari + VoiceOver will ignore/skip anchor tags with have user-select - Matt R Jan 30, 2018 at 18:08 Add a comment 2 Answers Sorted by: 6 Screen readers and other tools rely on the base HTML document that you send along. As such, making things unselectable should not have an effect, just as other styling effects wouldn't matter.

  26. How to enable user select for some tag using CSS

    1 I have already applied following to by body tag which makes my whole body unselectable -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;