Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula grƔtis0
Change Html button color when user unselect button
How to change Html button color when user unselect button using Js and CSs
9 Respostas
+ 2
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 ;)
+ 2
You can create additional class for this button and for example toggle this class with an event of it.
0
Please share a short code for this
0
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)...
0
visph I mean that when the user clicks the buttom then clicks on body
0
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
}
0
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
0
0
visph Please help