神刀安全网

CSS user-select

In my question to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools.  The JSON Viewer component needed some love so that was first on my list.  While viewing the CSS for the JSON Viewer component, I saw something I hadn’t recognized:  CSS user-select :

.heading {   -moz-user-select: none; /* don't allow selection */ }

View Demo

After a bit of research, I found that you can control what content can be is selected using CSS:

.dont-select {     user-select: none;   }    .control-select {     user-select: none; /* don't select anything */     user-select: auto; /* let the browser decide */     user-select: all; /* select everything */     user-select: text; /* select only text */     user-select: contain; /* selection contained within element bounds */   }

When I think about it, there’s certainly an argument to be made that you’d prefer some content be selected and copied and others content not, like advertisements or images.

View Demo

This falls into the family ofCSS pointer-events where CSS is used for something other than display.  My first thought is that selection preference should be done via a HTML attribute, like autocomplete and autocorrect are.  Anyways, give the demo a roll!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » CSS user-select

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮