How to Disable Text Selection in HTML with CSS? Last Updated : 29 Jul, 2024 Summarize Comments Improve Suggest changes Share 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 Hide Option in Select Menu with CSS ? Y 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 Like