How do I disable text selection with CSS or JavaScript?

html css cross-browser textselection
daviddarx picture daviddarx · Sep 23, 2010 · Viewed 283.7k times · Source

I am making a HTML/CSS/jQuery gallery, with several pages.

I indeed have a "next" button, which is a simple link with a jQuery click listener.

The problem is that if the user click the button several times, the text of the button is selected, and then the full line of text. In my really darky design, that is really ugly and nonsensical.

So here is my question: Can you disable text selection on HTML? If not, I'll terribly miss flash and its high level of configuration on textfields...

Answer

Jerome picture Jerome · Sep 23, 2010 
<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

Related questions

How to make HTML Text unselectable

I would like to add text to my webpage as a label and make it unselectable. In other words, When the mouse cursor is over the text I would like it to not turn into a text selecting cursor at …

Read More
Is there a way to make text unselectable on an HTML page?

I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers. I might …

Read More
How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More