How to avoid this with CSS?

Question

I have a table, and in the first td I have a glyphicon:

<td><span class="glyphicon glyphicon-chevron-right"></span></td>

I added a onclick event on it, which will toggle the class, but when I do:

enter image description here

As you can see, I can accidentally "select" extra areas. That looks really bad.

Is there any suggestion on it?

There is an answer to that question [here](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting). — Octopus, Feb 05 '15 at 05:08

score 1 · Answer 1 · answered Feb 05 '15 at 05:08

1

Just disable the user selection.

.glyphicon{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

answered Feb 05 '15 at 05:08

Lewis

13,134
12
62
81

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

Add this to your element, as seen in this answer:

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;/*IE*/
}

edited May 23 '17 at 11:57

Community

1
1

answered Feb 05 '15 at 05:08

Tom Prats

6,748
7
46
76

Very good point, flagged now – Tom Prats Feb 05 '15 at 05:28

How to avoid this with CSS?

2 Answers2