Code2care : TechZone Apps & Tutorials

How to make div or text in html unselectable using CSS



You must have seen certain websites where you cannot select/copy text to clipboard be it web or mobile devices. i.e unselectable elements like div or p. If you want to implement this functionality to your webpage then you can achieve it using simply pure CSS properties/attributes.

Properties to Disable copy to clipboard options.



For iOS and Safari browsers



    -webkit-touch-callout : none
    -webkit-user-select:none


    webkit-touch-callout : none : No callout option will be shown when the users touches and holds on the element with this attribute.

    webkit-user-select : none : You cannot select text on Safari on Mac OS X, if you do a right-click no options to copy is displayed.


For Mozilla firefox browser



    -moz-user-select: none;


    -moz-user-select : when set to none, text cannot be selected and copied to clipboard on mozilla firefox browsers.


For Windows Internet Explorer (ie) browsers



    -ms-user-select: none;
    user-select: none;

    -ms-user-select : makes text unselectable in ie web and mobile browsers.


For Opera desktop and web browsers



    -o-user-select: none;;
    user-select: none;

    -o-user-select: none : makes text unselectable in ie web and mobile Opera browsers.




Example :


    Now lets create a div tag and add the above code in style attribute to check if it works!

    <div style="-webkit-user-select: none;
    -khtml-user-select: none;
    -webkit-touch-callout : none
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none; background:#ffff22">
    This text cannot be copied to clipboard. Just try doing it :D </div>


    Demo :

    This text cannot be copied to clipboard. Just try doing it :D




Note : This code may not work for older web browsers as these properties were added later to the webkits. Aslo compatibility on IE 6,7,8,9 and 10 needs to be checked!


Top




Posts related to html.


1. How to place two div elements next to each other

2. Align html element at the center of page vertically and horizontally

3. Remove Html head and body tags from ckeditor source

4. How to set opacity only for div background and not the text - CSS

5. How to get table td, tr or th inner content value with id or name attribute

6. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

7. Link in html without a underline

8. Adding Sub Headings to Bootstrap Header tags

9. How to make a div tag clickable

10. Top 15 Programming Languages to learn 2014-2015

11. Chessboard with pieces using pure HTML and CSS

12. Default speed of Marquee tag : SCROLLAMOUNT

13. How to make div or text in html unselectable using CSS

14. Add Animated Scrolling to Html Page Title Script

15. Fibonacci series from 1 to 500 table

    more...

Posts related to css.


1. Remove Html head and body tags from ckeditor source

2. Responsive web design using CSS Media Queries

3. Default speed of Marquee tag : SCROLLAMOUNT

4. Align html element at the center of page vertically and horizontally

5. How to make jsfiddle bootstrap ready

6. How to place two div elements next to each other

7. How to set opacity only for div background and not the text - CSS

8. How to make div or text in html unselectable using CSS

9. Chessboard with pieces using pure HTML and CSS

10. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

11. Facebook like box overlaps fixed div element while scrolling the page

    more...






Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-15