CODEWITHSUNDEEP
javascriptpseudo-class
basicallydan
basicallydan

Reputation: 2142

Removing the :active pseudo-class from an element

I'd like to be able to tell an element that it is no longer :active so that the CSS rules no longer apply. Is there any way to do this in JavaScript?

Upvotes: 17

Views: 27616

Answers (4)

Oleg Shalaev
Oleg Shalaev

Reputation: 179

For jQuery users:
JS:

$(".btn").click( function () { $(this).blur(); } );

HTML:

<button  type="button" class="btn btn-success">press me</button>

Upvotes: 1

Saitama
Saitama

Reputation: 497

Here is a trick by resetting the DOM element.

function resetElement(e){
    var $e = $(e);
    var $original = $e.clone();
    $e.replaceWith($original);
}

Then call it with:

resetElement(document.activeElement);

Upvotes: 2

Tim Nguyen
Tim Nguyen

Reputation: 1213

Possible solutions :

1) Using classes :

JS :

document.getElementById("element").classList.remove("hasactive");

CSS :

#element.hasactive:active {
    background:blue;
}

2) Preventing default mousedown functionality (active state) :

EDIT : Apparently, this only works on Firefox.

JS :

document.getElementById("element").onmousedown = function(event) {
    event.preventDefault();
}

3) Removing a style element with the css rule in it

HTML :

<style id="activestyle">
#element:active {
/*Your code here*/
}
</style>

JS :

document.getElementById("activestyle").remove();

Upvotes: 12

Alex
Alex

Reputation: 11245

Use document.activeElement:

document.activeElement = null;

OR

document.activeElement && document.activeElement.blur();

Upvotes: 0

Related Questions