How to Disable Text Selection Highlighting using CSS?

Last Updated : 17 Nov, 2024

The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content.

Syntax

user-select: none;
-webkit-user-select: none;  /* Chrome, Opera */
-webkit-touch-callout: none;   /* Safari */
-moz-user-select: none;   /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */

Disable Text Selection Highlighting using CSS

To disable the text selection, we use user-select property. This property controls whether users can select text or not. It prevents the user from selecting content.

Note: The user-select property is widely supported, older versions of some browsers may require vendor prefixes (e.g., -webkit-, -moz-) for compatibility.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .disable-text {
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <h3>Disabled Text Selection</h3>
    
    <div class="disable-text">
        <h4>Hello World</h4>
        <p>This text cannot be selected by the user.</p>
    </div>
</body>

</html>

Output

Disabled-Text-Selection

When/Why to use Disable Text selection?

Ideally, it is not recommended to disable text selection on your webpage, as this impacts user accessibility. These are some situations where you might want to disable text selection:

When you intentionally want user to copy/select given information. For example, price, terms & conditions etc.
In case of interactive elements, like button, dropdowns, or drag-drop related elements (web-tools, games etc). For these cases, accidental text selection can interfere with functionality.
In case of Widgets where disabling text selection is intended. For example, Ratings, slider labels, or form descriptions etc.

How to Align Content of a Div to the Bottom using CSS?

R

RahulRanjan4

News

Improve

Article Tags :

Similar Reads

How to Hide Scrollbar with CSS

Hiding the scrollbar with CSS can enhance the look of your webpage by removing visible scrollbars while still allowing users to scroll through content. This can create a cleaner, more streamlined user interface without sacrificing usability. In this article, we’ll explore different methods for hidin

How to apply !important in CSS?

The !important rule in CSS is used to add more importance to a property/value than normal. It forces a style to override any other declarations, ensuring the specified property value is applied, regardless of specificity. It helps resolve conflicts but should be used sparingly to avoid complicating

How to use a not:first-child Selector in CSS?

The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout. Syntax:not( element ) { // CSS property } Example: In this

How to Auto-Resize an Image to Fit a Div Container using CSS?

To resize an image or video to fit inside a div container, you can use the object-fit property. This property is used to specify how the content should fit inside the container. With object-fit, you can set the content to maintain its aspect ratio or stretch to fill the entire container. This allows

How to Disable Resizable Property of Textarea using CSS?

The resize property is used to disable the resizeable property of Textarea using CSS, by setting the resize property to none. Note: The resize property in CSS controls whether an element, like a textarea, can be resized by the user. Disable Resizing of TextareaThe resize property in CSS controls an

Create an Unordered List Without Bullets using CSS

To create an unordered list without bullet points, the CSS list-style-type property is used. This removes the default bullet points from the list items, and making the list appear plain. Table of Content Using list-style-type property Remove margin and padding after removing bullet pointsUnordered L

Set cellpadding and cellspacing in CSS

Cell Padding The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value. Example: C/C++ Code <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> tab

How to overlay one div over another div using CSS

Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple

How to disable a link using only CSS?

To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app

What does the “+” (plus sign) CSS selector mean?

The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO

How to Vertically Center Text with CSS?

Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element. 1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically ce

How to horizontally center a div using CSS ?

To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the

Change an HTML5 input placeholder color with CSS

The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non-

How to Disable Text Selection Highlighting using CSS?

The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content. Syntax user-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /*

How to Align Content of a Div to the Bottom using CSS?

Here are different ways to align the content of a div to bottom using CSS. 1. Using PositioningThe positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge. Syntax position: a

Displaying XML Using CSS

XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to transform data from one form to another form. An XML file can be displayed using two ways. These are as follows :- Cascading Style Sheet Extensible Stylesheet Language Transformation Displaying XML file using C

How to Include One CSS File in Another?

Including one CSS file within another allows you to organize your styles more efficiently. This technique is useful for managing large stylesheets or applying consistent styles across multiple pages. You can do this using the @import rule in CSS. Examples of Including CSS File in AnotherExample 1: T

How to Change the Cursor into a Hand Pointer on Hover over list using CSS

CSS offers a powerful property called "cursor" that controls the appearance of the mouse pointer when hovering over specific HTML elements. By assigning different values to this property, you can customize the cursor's behaviour. In our case, we'll be using the value "pointer" to trigger the classic

How to position a div at the bottom of its container using CSS?

Positioning a div at the bottom of its container means aligning the div so that it stays at the lowest point within the container's boundaries. This can be done using CSS techniques like absolute positioning, Flexbox, or Grid, each method providing different layout control options. Table of Content

How to hide an element when printing a web page using CSS?

Media queries allow you to apply different styles for different media types, such as screens or print. To hide certain elements (like headers or images) when printing a webpage, you can use the @media print query and set the visibility: hidden or display: none to hide those elements during printing.

Targeting only Firefox with CSS

Sometimes the content needs to focus on the particular browser. This article target the Firefox browser to display CSS property. The targeted CSS will works only for targeted browser. Target the Firefox browser with CSS in many ways. Some of them are discussed below: Method 1: This method uses Mozil

Font Scaling Based on Width of Container Using CSS

Adjusting font size dynamically according to the width of the container can enhance the readability and aesthetic of your web content. This technique is particularly useful for responsive designs, where text needs to adapt to different screen sizes or container dimensions. By using viewport units (v

How to make a placeholder for a 'select' box?

There is no placeholder attribute in 'select' tag but it can make the placeholder for a 'select' box. There are many ways to create the placeholder for a 'select' box. Example 1: C/C++ Code <!DOCTYPE html> <html> <head> <title>make placeholder</title> <style> body

Maintain the aspect ratio of a div with CSS

Maintaining the aspect ratio of a div with CSS ensures the div's width and height stay proportional when resizing the browser window. This is important for responsive design, preserving the visual integrity of content such as videos, images, and other elements across different screen sizes. To maint

翻译：