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

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

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, use the object-fit property for precise control over how the content fits.object-fit maintains the aspect ratio or stretches the content to fill the container.Common values include cover (fills the container, may crop) and contain (fits with

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 el

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 ContentUsing list-style-type property Remove margin and padding after removing bullet pointsUnordered Lis

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: html <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> table, th

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