How to prevent selecting text on double click?

Question

#btnLeft{
    width:40px;
    padding:2px 5px 2px 5px;
    background-color: #20a0a0;
    border: thin solid #099;
    border-radius:7px;
    text-align:center;
    font-family:"Futura Md BT";
    font-size:large;
    color:#FFF;
}

This is a css button.
When user accidentally makes double click instead of single one, text inside the button becomes selected, i.e. - changes its background color.
How to prevent this selecting on double click ?

Duplicate of this question? http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting — Michelle, Dec 04 '12 at 17:52
@Michelle, what is the accepted solution on your link ? Also, i don't want to prevent selecting text in body part of page, just on buttons. — Alegro, Dec 04 '12 at 17:57
The "accepted" solution on @Michelle's link, is the solution with more votes. Why would that CSS code prevent the user from selecting text from other parts of the page? You put it on your #btnLeft{} and it does not interfere with the rest of your document. — Fábio Duque Silva, Dec 04 '12 at 18:06

NullPoiиteя · Accepted Answer · 2012-12-04T17:59:15.617

43

try little jquery

 $(element).mousedown(function(){ return false; })

with css try

-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;

edited Dec 04 '12 at 17:59

answered Dec 04 '12 at 17:53

NullPoiиteя

56,591
22
125
143

1

NullPointer, Thanks a lot. Solved – Alegro Dec 04 '12 at 18:01

Gazza · Answer 2 · 2013-08-14T04:55:26.230

7

If you use a <button> or <a> tag and include an href attribute then the behaviour should be mitigated. And its more semantic :)

edited Aug 14 '13 at 04:55

answered Aug 14 '13 at 04:27

Gazza

3,051
1
20
22

In certain situations, this isn't possible like when using checkbox inside a label :) – Zeshan Ahmed Jul 22 '16 at 17:01

How to prevent selecting text on double click?

2 Answers2