2

I read this article of difference between :focus and :active, What is the difference between :focus and :active? I understand from this one that when button clicked, the :focus:active properties gets applied. However what if when I click, I dont want whatever properties I have defined for :focus to be applied on :active state say I have 3 buttons, and here is CSS:

button { color: black; }
  button:focus {   outline: 0;
    text-decoration: underline;
    box-shadow: 0 2px 4px 0 rgba(33, 43, 49, 0.5); }
  button:active {   background-color: #000;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
    box-shadow: none;}

now when I click and release the mouse after the click, I want box-shadow and text-decoration to be none, however it still shows up after releasing the mouse on click, is this the expected behavior of :focus and :active psedo elements

http://jsfiddle.net/c8txd4e5/

Please can someone enlighten me with the approach? Thanks

user1234
  • 3,000
  • 4
  • 50
  • 102
  • I am not really sure what is your question? you don't want this to happen or you are not understanding why it's happening? – Temani Afif Feb 11 '19 at 20:30
  • I dont wan to get the text underline and box-shadowed when I click and release the mouse, but on focus(when I tab) I want the text to be underline and box-shadow. In my case, the underline and box-shadow is happening in :focus and :active state, even though I have set both properties to none. I dont want this to happen, any suggestions around that? – user1234 Feb 11 '19 at 20:35
  • the active state last only when the mouse is pressed ... if you release the mouse it's gone and the focus will be kept – Temani Afif Feb 11 '19 at 20:38

1 Answers1

0

Yes, that's expected. :active applies while the link is being clicked, i.e. while the mouse button is pressed on it. :focus applies as long as the element is in focus, which generally lasts from the moment it's first active until you move focus somewhere else on the page with another click elsewhere, a TAB key press, etc.

For your example, it sounds like you don't want to put text-decoration and box-shadow on the :focus pseudo-element at all; if you do, as you've noticed, those styles will stay after you release the mouse button, because the link is still in focus, though it's no longer active. So what I think you want is simply to use the :active pseudo-element like this:

button {
    color: black;
}
button:focus {
    outline: 0;
}
button:active {
    text-decoration: underline;
    box-shadow: 0 2px 4px 0 rgba(33, 43, 49, 0.5);
    background-color: #000;
    border-color: #fff;
    color: #fff;
}
IceMetalPunk
  • 5,476
  • 3
  • 19
  • 26
  • I think I was not clear in my questions, sorry about that. I DONT want ```text-decoration``` and ```box-shadow``` on ```:active``` state, but I WANT these both on ```:focus```, so the issue is when I click on mouse and after releasing it, I dont want to see the underline and box shadow properties. The above solution disables my ```:focus``` which I dont want. I hope this makes sense. thanks – user1234 Feb 11 '19 at 20:43
  • If you put the `box-shadow` and `text-decoration` in your `:focus` pseudo-element, then it will be there when you release the mouse. That's how that element works. More generally: any styles you don't want after you release the mouse should go into the `:active` pseudo-element. Any styles you *do* want to remain after releasing the mouse should go into `:focus` instead. I hope that makes sense? – IceMetalPunk Feb 11 '19 at 20:45