Home
Blog
Blogger

Disable Text Selection on Your Blog Using CSS

Disable text selection on your blog with simple CSS for Blogger & WordPress. protect content, prevent copying, and keep your layout tidy.
Suptojit Modak

Learn How to Disable Text Selection in Your Blog (Blogger & WordPress)

Table of Contents

Want to stop visitors from selecting or highlighting text on your website? You can easily do this with a simple CSS code snippet, and you don't need JavaScript. This works well for elements like image captions, copyright notices, or decorative headers where you don't want text selection.

Disable Text Selection Using CSS

The CSS Code to Disable Text Selection

This code works on almost any website and is very compatible with all major web browsers. Just copy and paste it into your site's stylesheet. 

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

Code Explanation

  1. -webkit-user-select: none;: This is for web browsers based on the WebKit engine, such as Safari and Chrome.
  2. -moz-user-select: none;: This rule targets Mozilla Firefox.
  3. -ms-user-select: none;: This is for Internet Explorer and Microsoft Edge.
  4. user-select: none;: This is the standard CSS property, supported by most modern browsers.
Related Posts

How to Add the Code to Your Blog

For Blogger Users:

  1. Go to your Blogger Dashboard.
  2. Navigate to Theme.
  3. Click on Edit HTML.
  4. Find the <b:skin> section.
  5. Paste the CSS code just before the closing </b:skin> tag.

For WordPress Users:

  1. From your WordPress Dashboard, go to Appearance.
  2. Select Additional CSS.
  3. Paste the code into the text area and click Publish.

Target Specific Elements Instead of the Entire Page

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

Example: Disabling selection on a specific class 

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

You can then add the class no-select to any HTML element, like this: 

<div class="no-select">This text cannot be selected.</div>
Related Posts

Frequently Asked Questions (FAQ)

Does this method work on mobile devices?

Yes, the -webkit-touch-callout: none; property helps stop the callout menu (like copy/paste) from showing up when a user long-presses an element on iOS devices.

Can users still copy the content by viewing the source code?

Yes, this method only stops visual text selection. Users with basic web development knowledge can still get and copy the content from the page's source code.

Is it a good idea to disable text selection on my entire blog?

It is generally not a good idea since it can frustrate users who want to copy a quote or reference part of your content. Use this method only on specific elements where it makes sense.

Post a Comment