CODEWITHSUNDEEP
htmlcss
user1563944
user1563944

Reputation: 403

Remove blue box when rapidly clicking div

There are a number of questions on here about getting rid of blue outlines/borders on click <a/> tags, links and buttons - Remove blue border from css custom-styled button in Chrome, for example - but what I wanted to know was is there a way of preventing an annoying blue boxes that sometimes appears when you click fairly rapidly on a <div> elememt? 

<div class="img" style="left: -200%;"></div>
<div class="img" style="left: -100%;"></div>
<div class="img visible" style="left: 0%;"></div>
<div class="img" style="left: 100%;"></div>
<div class="img" style="left: 200%;"></div>

I've got 5 divs just like the ones above. When the div with the class of visible is clicked, the class is removed and added to the next div in the list and the left values are adjusted etc etc. When you click rapidly you sometimes get this annoying blue box that seems to attach itself to either the visible div or the one to the left or right of it.

Is clicking rapidly almost like your selecting the divs?

I'm not sure what this box would be called so, if you can can you target it using css and disable it?

Upvotes: 1

Views: 3123

Answers (2)

user1563944
user1563944

Reputation: 403

Ok, so a bit more digging around and found the answer to be

.elementToBeTargeted {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

This will remove the blue highlighting / selecting box that sometimes appears when you click a lot on the same element.

Upvotes: 1

jylny
jylny

Reputation: 156

If I'm reading correctly I think you're just ending up highlighting a box, like double clicking text but with a div. https://css-tricks.com/overriding-the-default-text-selection-color-with-css/ relevant link.

Upvotes: 0

Related Questions