How to Enable Text Selection on Websites That Disable Highlighting

There's a specific frustration that comes from trying to highlight text on a page that simply won't cooperate. Your cursor moves, nothing turns blue, no selection happens. You try clicking and dragging more deliberately. Still nothing. The text is right there on the screen — it's just completely untouchable.

This happens because of CSS or JavaScript — a few lines of code the site owner added that instruct your browser not to let you select anything. The good news: your browser ultimately follows your instructions, not the website's. Here's how to take back control.

The Two Mechanisms Behind Text Selection Blocking

Most text selection blocks use one or both of the following:

CSS user-select: none

body, * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

This is the most common method. The CSS property user-select tells the browser whether to allow text selection on an element. Setting it to none prevents any highlighting. It applies to every element when set on body or *. It can be overridden with CSS specificity — your own rule with higher specificity or !important will win.

JavaScript selectstart blocking

document.addEventListener('selectstart', function(e) {
  e.preventDefault();
});

This blocks the event that fires when a user begins selecting text. Even if CSS allows selection, blocking selectstart prevents it from starting. Some sites use both — the CSS makes text visually unselectable, and the JavaScript adds a second layer.

Method 1 — Browser Extension

The cleanest solution for regular use. A copy-enabling extension overrides both mechanisms at page load. The CSS override restores user-select: text on all elements. The event override cancels the selectstart block before it fires.

Install Enable Copy Everywhere, Enable Copy, or a similar extension from the Chrome Web Store. After installation, visit any site with blocked selection — text should now be highlightable normally.

This also pairs well with understanding why websites disable these features in the first place — the reasons range from misguided copyright protection to genuine platform-specific policy.

Method 2 — DevTools Console (Quick, No Install)

1. Press F12 to open DevTools.
2. Go to the Console tab.
3. Run:

// Fix CSS user-select
document.querySelectorAll('*').forEach(el => {
  el.style.userSelect = 'text';
  el.style.webkitUserSelect = 'text';
});

// Remove selectstart block
document.addEventListener('selectstart', e => e.stopImmediatePropagation(), true);

After running this, you can click and drag to select text normally. Press Ctrl+C to copy after selecting.

Note: if Ctrl+C still doesn't copy after the selection is restored, the site also has a copy event block in place — a separate restriction that needs its own fix. Add the following to the same console run:

document.addEventListener('copy', e => e.stopImmediatePropagation(), true);

Method 3 — DevTools Styles Panel Override

If you want to fix a specific element rather than the whole page, or if the console script doesn't fully work because of high-specificity CSS:

1. Open DevTools (F12).
2. Select the element that has blocked text.
3. In the Styles tab on the right side, look for user-select: none.
4. Click the value and change it to text, or click the checkbox to disable the rule.

This is useful for surgically restoring selection on one component while leaving the rest of the page CSS untouched. It's also how you diagnose which element is blocking selection if the console script doesn't fix it.

Method 4 — Reader Mode

Chrome and Firefox have a reader mode that strips the page of all CSS and JavaScript, rendering just the content. In Reader Mode:

• All text is fully selectable.
• No event listeners run.
• No custom CSS applies.
• Copy, paste, and highlight all work normally.

In Chrome, access Reader Mode by typing chrome://flags, searching for "Reading Mode," enabling it, and restarting Chrome. Then a reader icon appears in the address bar on supported pages.

In Firefox, the reader mode icon (a small book icon) appears in the address bar automatically on article pages.

This is the zero-effort option — no extension, no console, no CSS editing. For sites that primarily serve long-form text (news articles, blog posts), it's usually the fastest path.

Method 5 — Using the Elements Panel to Extract Text

If none of the above lets you select text in the normal way (rare, usually means the text is rendered differently), the DevTools Elements panel always has the text content available:

1. Open DevTools.
2. Use the element selector to click the blocked text.
3. In the Elements panel, find the text node inside the element.
4. Right-click > Copy > Copy text content.

This bypasses every selection restriction because you're not interacting with the page's rendered output — you're reading the DOM tree directly.

When Text Selection Is Used Legitimately

Not every selection block is a site owner being overprotective. A few cases where disabling selection makes genuine sense:

• Interactive demos and tools where text-select behavior interferes with drag/drop or canvas interactions.
• Mobile-optimized tap targets where user-select: none prevents accidental selection on touch interfaces.
• Editable rich-text components that manage selection state internally.

If you encounter selection being blocked on something that's clearly an interactive element — a drawing tool, a drag-and-drop interface, a code editor — the restriction is probably intentional and functional, not a copy-protection measure.

For general web browsing and research, though, having selection blocked on normal text content is an unnecessary restriction that you have every right to remove in your own browser.

For researchers who work with restricted pages regularly, dedicated research tools handle text extraction more systematically than per-site fixes.

Frequently Asked Questions

Why can't I highlight text on some websites? Text selection is disabled via CSS user-select: none and/or a JavaScript selectstart event block. Both can be overridden in your own browser.

Can I fix text selection without installing anything? Yes. Open DevTools (F12), Console tab, run: document.querySelectorAll('*').forEach(el => el.style.userSelect = 'text'). Works for the current session.

Does enabling text selection also enable copy? Not always. Text selection and copy are separate restrictions. After restoring selection, also remove the copy event block if Ctrl+C still doesn't work.

Why do news sites block text selection? To deter scraping and enforce content licensing. It primarily affects honest readers, not automated scrapers.

Does text selection restriction affect Chrome's Reader Mode? No. Reader Mode strips all site CSS and JavaScript. Text selection always works normally in Reader Mode.