How to change color of button in active state using inline CSS?

Question

Is there any way to change the background color and/or border color of a button when it is in active state (i.e. Clicked) using inline css?

<button class="btn btn-xs btn-primary btn-inverse dropdown-toggle" type="button" data-toggle="dropdown" style="margin-top: 12px; background-color: rgba(0, 0, 0, 0); border-color:rgba(0, 0, 0, 0); margin-right:20px">

Something like this but for when the button is clicked?

no...it's not possible...you can provide inline css only for the default state...any changes required for a different must be in a stylesheet or must be inside a style tag — Rakesh G R, Sep 22 '16 at 12:50
This should be a possible duplicate for http://stackoverflow.com/questions/28712267/how-to-change-the-button-color-when-it-is-active-using-bootstrap — , Sep 22 '16 at 12:57

score 2 · Answer 1 · answered Sep 22 '16 at 13:00

2

You can't change the background color and/or border color of a button when it is in active state (i.e. Clicked) using inline css, You can use :active in calss to change baground color or border color

answered Sep 22 '16 at 13:00

Nitrick

131
4

Thanks for the answer! Is there any reason why we can't access btn:active inline? – Potterapple Sep 22 '16 at 13:02
1

I think we can't use btn:active is the event which is going to happen after button is clicked and that and only by css or js by triggering it and etc. In short that class will be not abel to render properly by inline so we can't use it. – Nitrick Sep 22 '16 at 17:51

score 2 · Accepted Answer · answered Sep 22 '16 at 13:01

Considering that css :active is just a css pseudo-class and not a Dom property or attribute you can't have an inline equivalent for that.

But, if in your case, the click event could be a valid alternative, you can do something like that...

<script>
  function toggleBg(element, color) {
    if(!color) {
      color = element.dataset.normalColor;
    } else {
      element.dataset.normalColor = element.style.backgroundColor;
    }

    element.style.backgroundColor = color;
  }
</script>

<button onmousedown="toggleBg(this,'red')" onmouseup="toggleBg(this)">RED ON PRESS</button>

Just a note, inline-styling or inline-javascript isn't a good practice, if you can, use css:

<style>
  button:active { background: red; }
</style>

<button>RED WHEN ACTIVE</button>

Thank you for your response. Why is inline-styling not a god practice? — Potterapple, Sep 22 '16 at 13:09
http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css — Hitmands, Sep 22 '16 at 13:23

How to change color of button in active state using inline CSS?

2 Answers2

Linked