0

I have seen numerous stack posts and other online articles that say to force a button state to active, just add the "active" class to it. This simply doesn't work.

I have an input element of type button:

<input type="button" id="btn25" value="$25" class="checkout-btn" onclick="donateButton(25)">

In Chrome Dev Tools when I select the button, expand the Force element state panel, and check :active, that does exactly what I need (displays the button as if it's being actively clicked by the mouse).

enter image description here

But adding a class named "active" or "ACTIVE" or "activated" (as suggested by numerous answered posts) does nothing. I've tried this both with jquery, and by just adding it to the static html. And I don't see how it could do anything, since I don't have a class in my css named "active".

There must be a way in jquery to force element state to :active that does the same thing as when I check the :active box in dev tools.

HerrimanCoder
  • 6,835
  • 24
  • 78
  • 158
  • 1
    Some libraries like [Bootstrap] use an `.active` class for applying their styles, which is perhaps where the confusion is coming from. Why exactly is it that you are attempting to force an active or active-like state? Understanding that might better inform how to answer this question. – Alexander Nied Sep 10 '21 at 13:36
  • Alexander, I have several donation buttons side-by-side with amounts on them, and when one of those buttons is clicked, I want it to remain appearing "clicked" (depressed), as a visual cue to the user which amount was selected. – HerrimanCoder Sep 10 '21 at 13:49
  • @HerrimanCoder: It sounds like that may be better solved by tracking in your code which ones have been clicked and updating their classes/styling accordingly, rather than trying to awkwardly force this pseudo-class. – David Sep 10 '21 at 13:53
  • 1
    You could (should) use a checkbox instead of a button - style the checkbox so it looks like a button and "active" when "checked" (but without seeing a checkbox). – freedomn-m Sep 10 '21 at 13:59
  • 1
    Does this answer your question (as an alternative to the actual question) : [Style checkboxes as toggle buttons](https://stackoverflow.com/questions/15436450/style-checkboxes-as-toggle-buttons) – freedomn-m Sep 10 '21 at 13:59
  • 1
    *I don't see how it could do anything, since I don't have a class in my css named "active"* - the key here is to **add a class named "active"** – freedomn-m Sep 10 '21 at 14:00
  • David, you said the magic word: `pseudoclass` - I didn't know that's what it was called, and I think this probably answers my question: https://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery – HerrimanCoder Sep 10 '21 at 14:02
  • 1
    That answer essentially says "add an 'active' class" :D – freedomn-m Sep 10 '21 at 14:07
  • Thanks everyone for helping me learn. – HerrimanCoder Sep 10 '21 at 15:37

0 Answers0