Disable Textual content Choice with CSS

There could be some situations the place stopping sure elements of your net web page from being chosen could possibly be useful. In these instances, you would attempt utilizing the consumer-choose CSS property.

Instance

This is a method rule for a category named disable-choice that, when utilized to an HTML component, will forestall individuals from with the ability to choose the factor:

.disable-choice 
     -moz-consumer-choose: none; /* Firefox */
      -ms-consumer-choose: none; /* Web Explorer */
   -khtml-consumer-choose: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-consumer-choose: none; /* Chrome, Safari, and Opera */
  -webkit-contact-callout: none; /* Disable Android and iOS callouts*/

Some particulars concerning the type rule:

• -webkit-consumer-choose is for Chrome, Safari and Opera (there isn’t any want for -o-consumer-choose)


• An unprefixed model of the consumer-choose property was purposely omitted.


• The -webkit-contact-callout property disables the callouts that pop up throughout contact occasions (on iOS and Android). See following picture for reference.

Demo

View demo

Essential Issues to Maintain in Thoughts

There is a catch: consumer-choose is not a normal CSS property included in any W3C specification. Though consumer-choose has a superb degree of browser support, using the property requires vendor prefixes.

Within the prior instance, I did not use an unprefixed consumer-choose property declaration. That is as a result of there isn’t any such property within the eyes of net requirements. I might go as far as to analogize using consumer-choose as being equal to utilizing a proprietary CSS property akin to Web Explorer’s -ms-filter or -ms-textual content-kashida-area.

Different issues to notice:

• consumer-choose is buggy and inconsistent. Typically you’ll be able to nonetheless choose the textual content, particularly whenever you begin by choosing parts of the UI which are not disabled.


• Utilizing the “Choose All” command will sometimes embrace disabled texts. (Win: Ctrl + A/Mac: Cmd + A) This example can clearly be seen in Web Explorer eleven.


• This
  
  

  The post Disable Textual content Choice with CSS appeared first on DICKLEUNG DESIGN 2014.