CSS user-select attribute collection, cssuser-select

CSS user-select attribute collection, cssuser-select

I sorted out the Notebook yesterday and checked the manual. Previously, the user-select attribute was ignored because I thought it was only supported by webkit. The manual is supplemented:

User-selectProhibit users from selecting text
None: Text cannot be selected
Text: Select text
All: All content can be selected as a whole. If you double-click a child element or click a child element on the context, the selected part is the highest ancestor element that the child element is traced back.
Element: You can select text, but the selection range is restricted by the element boundary (not supported by webkit currently)
Compatible processing:
 
 

  
  
The IE6-9 does not support this attribute, which can be implemented using the label attribute onselectstart = "return false;
  
  
Earlier versions of Oprea use the private label attribute unselectable = "on" to achieve the effect of user-select: none. The latest Opera version supports the webkit prefix.
  
  
Except Chrome and Safari, if you set text to-ms-user-select: none in other browsers, you cannot start to select text in the text block. However, if you select text from other areas of the page, you can continue to select the area text set to-ms-user-select: none;
 
 

Summary:

Html:

<P onselectstart = "return false;" unselectable = "on"> prohibited text </p>

Css:

/* When the prefix is automatically generated */p {user-select: none;}/* When the prefix is not automatically generated */p {user-select: none; -webkit-user-select: none;-ms-user-select: none;-moz-user-select: none ;}

Speaking of user experience, it seems that this is not necessary to do so, except for some necessary auxiliary places, such as simply avoiding the drag event. It seems that it is of little use (it is meaningless to prevent text theft or something ).

However, I accidentally found a useful place. Now it is common to use fonts as icons. I am processing this page one day.

The copy switch button icon at the bottom of the side is the cited iconfont. Because the user clicks frequently, the selected text will appear unsightly and harmonious. Here, apply user-select: none is excellent.

Therefore, it is easy to be careful,When using a font as a chart icon, when the icon element is frequently clicked, you can consider adding user-select: none to prevent the font from being selected as a text and affecting the appearance..