How to Disable Text Selection in HTML with CSS? Last Updated : 29 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Disabling text selection in HTML can be useful in scenarios where you want to prevent users from copying text, dragging elements, or accidentally selecting text while interacting with web page elements.These are the following approaches:Table of ContentUsing user-select PropertyUsing Vendor Prefixes for Cross-Browser CompatibilityUsing user-select PropertyIn this approach we will use the user-select CSS property. This property is used to control the user’s ability to select text. This is the most straightforward and modern way to disable text selection.Syntax:element { user-select: none;}Example: In below example we are using user-select to disable text selection in HTML with CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> p { user-select: none; } </style> <title>Disable Text Selection</title> </head> <body> <h3>Disable text selection using user-select property</h3> <p>This text cannot be selected.</p> </body> </html> Output:OutputUsing Vendor Prefixes for Cross-Browser CompatibilityTo ensure compatibility across different browsers, it is important to include vendor prefixes for the user-select property. Different browsers might require specific prefixes to support the user-select property. This approach ensures that the text selection behavior is consistent across all major browsers.Syntax:element { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Standard Syntax */}Example: To disable text selection on a div element with cross-browser support: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Standard Syntax */ } </style> <title>Disable Text Selection</title> </head> <body> <p>This text can not be selected.</p> <div>This text cannot be selected in any browser.</div> </body> </html> Output:Output Comment More infoAdvertise with us Next Article How to Disable Text Selection in HTML with CSS? yuvrajghule281 Follow Improve Article Tags : HTML CSS-Questions Similar Reads How to Disable Text Selection in Tailwind CSS? Tailwind CSS can also be used for disabling text selection, providing a straightforward way to enhance user experience in web applications. By using Tailwind's utility classes, developers can easily control the selectability of text elements, preventing unwanted highlighting during interactions.This 2 min read 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.Syntaxuser-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /* F 2 min read How to Make Text Input Non-Editable using CSS? There are situations where you might want to create non-editable input fields. HTML and CSS both provide ways to achieve this.1. The read-only Attribute in HTMLThe read-only attribute in HTML is used to make a text input field non-editable, meaning users can see the content but cannot modify it. Thi 2 min read How to Hide Option in Select Menu with CSS ? In HTML, the <select> tag creates a dropdown menu for user selection. Hiding certain options with CSS allows them to remain in the code but be invisible to users. This technique is useful for conditional display or future reactivation without code changes.Syntaxselect option[value="value-to-hi 2 min read 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 3 min read How to disable input type text area? To disable an input type=text by using the input disabled attribute. A disabled input is un-clickable and unusable. It is a Boolean attribute. The disabled elements are not submitted in the form. Syntax: <input type="text" disabled>Example 1: To disable an input field of type "text" by using t 2 min read How to Disable Radio Button in HTML? This article will show you how to disable Radio Button in HTML. The disabled attribute is used to disable a radio button in HTML. This attribute prevents the radio button from being selected by the user. Using the disabled AttributeThe disabled attribute is used to disable the input fields. To disab 2 min read How to disable the drop-down list in HTML5 ? In this article, we will learn how to disable the drop-down list in HTML5. The drop-down is used to create a list of items that need to select an element. We use <select> and <option> elements to create a drop-down list and use the disabled attribute in <select> element to disable 2 min read How to customize a âselectâ HTML form element with CSS3 ? The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list. In this article, you will learn many ways to customize "selectâ HTML form element with CSS 3. Note: The <select> tag is used 4 min read How to specify that an option should be disabled in HTML5 ? The <select> tag is used to create a drop-down list in an HTML document. Generally, it is used in the forms when some data is to be collected from the user. By default, all the values or options can be chosen or selected from the drop-down list created using the <select> element. However 2 min read Like