Linked Questions

Popular Questions

Does :active and :focus gets applied on mouse click? -CSS

Asked by At

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

Related Questions