How to Disable Text Selection using CSS

Do you need to disable text selection/text highlighting on your website without using any JavaScript code? If the answer is yes, add this CSS code into your website to prevent users selecting text on your website or blog.

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

If you're using Blogger, add the CSS code just before ]]></b:skin>. For WordPress users, go to your WordPress Dashboard → Appearance → Customize → Additional CSS and paste the code there.

Note: This CSS works on virtually any website and is highly compatible with all major web browsers.

To see it in action, try selecting the text below.

Hi, I am an unselectable text. If you are not sure, try to select me.

If you want to disable text selection for a specific part of your website instead of the entire page, you can replace the body selector with any HTML tag, class, or ID.

To disable selection on a <div> with a specific ID:

#my-section {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

To target a class:

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

This way, you can apply the effect only where it's needed, such as on buttons, widgets, or specific content blocks, without affecting the entire page.