Change Html button color when user unselect button

Question

How to change Html button color when user unselect button using Js and CSs

Answer 1

so you want to style it differently based on its focused/blurred state ;)

with css it's easy, as we have the pseudo-classes :hover and :not...

button {
outline: blue solid 2px;
/* default style for all states */
}
button:not(:focus) {
outline: red solid 2px;
/* style for blurred state */
}
button:focus {
outline:lile solid 2px;
/* style for ficused state */
}

Obviously, if you use all three rules, the first one will never apply ;)

Answer 2

You can create additional class for this button and for example toggle this class with an event of it.

Answer 3

Please share a short code for this

Answer 4

What do you mean by "unselect button"?
Buttons are not able to be select/unselect...
Radio buttons or checkboxes can be selected/unselected, but cannot be styled (as workaround, you could hide them and build a real html element based on their states) ^^
However, button can be focused/blurred (currently active or not: active element receive keyboard default action such as click on return key pressed)...

Answer 5

visph I mean that when the user clicks the buttom then clicks on body

Answer 6

visph
How can I use the same property in Js
For example:
When button in focus{
Some statement
}
When button not in focus{
Some statement
}

Answer 7

With JS you need to handle the 'focus' event (and/or the converse 'blur' event):

https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event

Another way, less efficient but maybe easiest if event handling is unknown for you, would be to use setInterval or setTimeout, for watching the document.activeElement regularly:

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

Answer 8

Please help
https://www.sololearn.com/Discuss/2239010/?ref=app

Answer 9

visph Please help