CSS user-select attribute collection, cssuser-select

Source: Internet
Author: User

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;



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


/* 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..

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.