How to Disable Text Selection on Your Website Using CSS Code

Disabling text selection in WordPress can help discourage casual content copying, prevent accidental text highlighting, or create a cleaner experience for interactive website elements. Although text selection is a standard browser feature, not every website needs it enabled everywhere.

The good news is that you don’t need another WordPress plugin to control text selection. A few lines of lightweight CSS can disable selection across your website while still allowing it on specific elements when necessary.

In this guide, you’ll learn why you might want to disable text selection, where this technique makes sense, how to implement it in WordPress, and how to selectively allow text selection when required.

Important: Disabling text selection is only a basic deterrent against casual copying. It does not fully protect against copying or accessing publicly available webpage content.

Why Disable Text Selection on a Website?

Text selection is useful for many normal browsing activities. Visitors may select text to copy it, highlight information, search for a phrase, or use browser tools.

However, there are specific situations where preventing selection can make sense.

The key is to use the technique strategically, not to disable selection automatically across every type of website.

Content Protection

If you publish original articles, tutorials, documentation, creative work, or other valuable content, disabling text selection can discourage casual copying.

It should not be considered a complete content-protection system because determined users can still access publicly delivered webpage content through other methods.

Nevertheless, it can add a small layer of friction against straightforward copy-and-paste behavior.

Improving User Experience

Text selection can sometimes happen accidentally when users interact with certain interface elements.

This is especially noticeable on interactive websites, games, portfolios, drag-and-drop interfaces, and web applications.

If accidental highlighting interferes with the intended interaction, disabling selection can make the interface feel smoother.

Maintaining a Clean Visual Design

Some websites rely heavily on interactive or highly visual interfaces.

Unexpected text highlighting can make the interface look less polished, especially when users click, drag, or interact with elements that aren’t meant to behave like ordinary text.

Disabling selection in carefully chosen areas can therefore be as much a design decision as a technical one.

Common Use Cases for Disabling Text Selection

Not every website needs this feature, but several types of websites may find it useful.

Educational and Tutorial Websites

Educational websites sometimes publish proprietary material, tutorials, or other original resources.

Disabling selection can discourage casual copying, but it should not replace proper copyright protection or access controls.

E-Commerce Websites

Some e-commerce interfaces contain interactive components where accidental selection can interfere with clicking, dragging, or other interactions.

In those situations, disabling selection on specific interface elements may improve usability.

Interactive Web Applications

Games, calculators, tools, dashboards, and other web applications can sometimes benefit from disabling selection around interactive controls.

For these websites, the goal is usually better interaction rather than content protection.

Portfolio Websites

Designers and creatives may prefer to prevent accidental text highlighting around highly visual portfolio interfaces.

Selective use of user-select: none can help maintain the intended appearance.

How to Disable Text Selection in WordPress Without a Plugin

One of the easiest ways to disable text selection is with CSS.

You don’t need JavaScript or an additional WordPress plugin for the basic implementation.

The CSS user-select property controls whether users can select text within an element.

For a global implementation, you can apply it to the body element.

CSS Code to Disable Text Selection

The following CSS disables text selection globally while also providing a class that allows you to re-enable selection for specific elements:

document.addEventListener('paste', (event) => {  
  event.preventDefault();  
  alert('Pasting is disabled on this website.');  
});  

document.addEventListener('keydown', (event) => {  
  if (event.ctrlKey && ['c', 'v', 'u', 's'].includes(event.key.toLowerCase())) {  
    event.preventDefault();  
    alert('Keyboard shortcuts are disabled on this website.');  
  }  
});
	
document.addEventListener('contextmenu', (event) => {  
  event.preventDefault();  
  alert('Right-click is disabled on this website.');  
});  

document.addEventListener('keydown', (event) => {  
  if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {  
    event.preventDefault();  
    alert('Inspect element is disabled on this website.');  
  }  
});  

document.addEventListener('dragstart', (event) => {  
  event.preventDefault();  
  alert('Drag and Drop element is disabled on this website.');  
});

The first rule applies user-select: none to the website’s body, preventing normal text selection.

The .allow-select class provides an exception. You can add this class to an element where text selection should remain available.

How to Add the CSS in WordPress

If you’re using a WordPress site, you can add the supplied method directly through the WordPress Customizer.

Step 1: Open WordPress Admin

Log in to your WordPress administration dashboard.

Step 2: Open the Customizer

Go to:

Appearance → Customize → Additional CSS

Step 3: Add the CSS

Paste the CSS code into the Additional CSS section.

Step 4: Publish the Changes

Click Publish to save your changes.

Then refresh your website and try selecting text.

If the CSS is applied correctly, normal text selection should be disabled.

How to Allow Text Selection on Specific Elements

Disabling selection globally isn’t always ideal.

Visitors may still need to select content such as:

• Product information
• Addresses
• Contact details
• Documentation
• Form-related text
• Code snippets
• Important instructions

That’s why the .allow-select class in the CSS is useful.

For example:

<p class=”allow-select”>
This text can still be selected and copied.
</p>

The global body rule disables selection, while the .allow-select rule restores text selection for that particular element.

This gives you more control than simply blocking selection everywhere.

Should You Disable Text Selection Globally?

This depends on your website’s purpose.

A global user-select: none rule may make sense for a highly interactive interface where text selection is unnecessary.

For a normal blog or information website, however, it may create an unnecessary usability problem.

Visitors often expect to select text. They may want to copy an address, highlight an important sentence, quote part of an article, or save information for later.

For that reason, selective disabling is often a better approach than globally disabling text selection.

Use user-select: none where it solves an actual interaction or design problem, and preserve normal text selection elsewhere.

Advantages of Using CSS Instead of a Plugin

A major advantage of this approach is simplicity.

You don’t need to install another plugin merely to add a small CSS rule to your website.

Lightweight Solution

CSS is much lighter than adding an entire plugin for a single visual or interaction-related behavior.

For performance-conscious WordPress websites, reducing unnecessary plugins can simplify the overall site architecture.

Customizable

The .allow-select class gives you a simple way to create exceptions.

You can disable selection where it is useful and restore it where visitors need normal text behavior.

Simple to Maintain

Once you add the CSS, you don’t need a separate plugin interface to configure or update this functionality.

If your requirements change, you can simply edit or remove the CSS.

No Additional Plugin Dependency

Every additional plugin becomes another component to maintain.

For a small feature like text selection control, CSS can often do the job without adding another dependency.

Does Disabling Text Selection Protect Website Content?

Not completely.

This distinction is important.

Disabling browser text selection can make ordinary copy-and-paste more difficult, but it does not make webpage content impossible to access.

A website’s publicly displayed content still has to be delivered to the visitor’s browser.

Therefore, disabling selection should be considered a basic deterrent, not a complete content-protection mechanism.

If your primary goal is protecting valuable content, consider broader approaches appropriate to your specific situation rather than relying exclusively on CSS.

Does Disabling Text Selection Improve Website Performance?

Using a small amount of CSS for this purpose avoids adding a dedicated plugin simply to control text selection.

That keeps your WordPress setup simpler and avoids the extra assets or functionality an unnecessary plugin might introduce.

However, you should not expect a dramatic performance improvement from this CSS alone.

The bigger benefit is architectural simplicity: you’re solving a small problem with a small solution.

When You Should Avoid Disabling Text Selection

Some situations make disabling text selection less convenient.

For example, informational websites, blogs, documentation platforms, and educational resources often benefit from allowing visitors to select and copy information.

If your users frequently need to copy text, removing that ability can create frustration.

Before implementing the CSS, ask yourself:

Does disabling text selection solve a genuine problem for my visitors?

If the answer is no, there’s probably little reason to disable it.

Frequently Asked Questions

Disabling text selection in WordPress without a plugin is simple and can be done with a few lines of CSS.

The user-select property lets you prevent text selection globally, while a custom class such as .allow-select gives you the flexibility to restore selection where it is needed.

This approach can help with interactive applications, games, portfolios, and specific interface elements where accidental text highlighting creates a usability or design problem. It can also deter casual copying.

However, disabling selection should not be treated as complete content protection. For many blogs, educational websites, and documentation sites, allowing visitors to select and copy text may actually provide a better experience.

The best approach is to use text-selection restrictions selectively, only when they serve a clear purpose. A small CSS solution can give you that control without adding another WordPress plugin to your website.

Have you disabled text selection on your WordPress website?

Do you prefer blocking text selection globally or disabling it selectively for specific elements? Share your experience, questions, or CSS tips in the comments — and let us know what approach works best for your website.