Adding ' active' to to html button doesn't apply the styles mentioned in the :active psuedo class

Question

On clicking a button I want its color to be inverted.

Below is the html elements under concern:

    <div class='chatbot-container'>
      <div class='chatbot-wrapper' id='chatbot-wrapper' style="display:none;" >
        <iframe
          id="chatbot"
          class="chatbot"
          allow="microphone;"
          src="https://console.dialogflow.com/api-client/demo/embedded/xxx-xxx-xxx"></iframe>
        </iframe>
      </div>
      <button class='chat-btn' type="button" onclick="toggleChatbot()">Q</button>
    </div>

So here is my style sheet:

.chat-btn {
    background: red;
    color: #fff;
    font-size: 32px;
    ....
    <code snipped for brevity>
    ...
}
.chat-btn:hover {
    background: #fff;
    color: red;
}
.chat-btn:active {
    background: #fff;
    color: red;
}

Below is my script:

    <script>
      function toggleChatbot (chatBtn) {
        var x = document.getElementById("chatbot-wrapper");
        if (x.style.display === "none") {
          x.style.display = "block";
          chatBtn.className += ' active';
          console.log(chatBtn.active)
        } else {
          x.style.display = "none";
          chatBtn.className = chatBtn.className.replace(" active", "");
          console.log(chatBtn.active)
        }
      }
    </script>

So if you look at the below snapshot, 'active' is appended to the class as expected. But the css psuedo class style is not being applied.

But `active` is a state not a class, it's just something that happens when a link is `active (the moment of click and that's it)` what would adding an `active` class do? also, as mentioned active is only for the moment of the click. if you're trying to color the link after the click you should use `:visited` instaed of `:active`. I guess this would work if you change in your css `.chat-btn:active` to `.chat-btn.active` — fedesc, Jul 12 '20 at 06:32
Please provide a code snippet to demonstrat the issue. Without html for the chat button (`chat_btn` element) and its wrapper (the `#chatbot_wrapper` element) it's difficult to assist. — traktor, Jul 12 '20 at 06:43
@fedesc I tried adding :visited [```.chat-btn:visited { background: #fff; color: red; }```], it didn't work. And besides I want it to toggle colors on every click, I want it to be white when it's active, and red when it's not. Wouldn't ```:active``` psuedo class mark the button as visited on the first click and leave it that way? — Praveen Dass, Jul 12 '20 at 07:06

score -1 · Accepted Answer · answered Jul 12 '20 at 07:03

-1

It seems like you can't add a pseudo class to an element using JS as it's a pseudo class and not a real one. You could just create some other classes like chat-btn-hover which are similar to the pseudo classes! This links may help you:

https://www.quora.com/Can-I-add-the-hover-pseudo-class-to-an-element-using-JavaScript

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

answered Jul 12 '20 at 07:03

MoPaMo

517
6
24

1

I don't who down voted your answer. But it worked, and was exactly what I was trying to do. I have did something similar to this, but forgot how exactly I achieved it.The below code, based on your idea worked. ```if (x.style.display === "none") { x.style.display = "block"; chatBtn.className += ' chat-btn-active'; } else { x.style.display = "none"; chatBtn.className = chatBtn.className.replace(" chat-btn-active", ""); }``` and ```.chat-btn-active { background: #fff; color: red; }``` – Praveen Dass Jul 12 '20 at 07:14

Adding ' active' to to html button doesn't apply the styles mentioned in the :active psuedo class

1 Answers1