0

I'm having trouble styling button with :focus and :active psedo classes. I have certain properties defined for :focus that I dont want to apply for :active.

HTML

<button>
  When focused, my bgcolor turns red!<br />
  But  when clicked, where my bgcolor  turns #b0bfc6
</button>

CSS:

 button { font-weight: normal; color: black; }
  button:focus { 
  background-color: red; 
  text-decoration: underline;
  }
  button:active{
    background-color: #b0bfc6;
    }

fiddle:https://jsfiddle.net/ph16qjx2/

As you can see in the fiddle, when I click it the button turns to a grey bg, but also takes the property defined for :focus (which is text-decoration: underline; background-color: red) how can I prevent the properties defined for :focus from getting applied on :active

user1234
  • 3,000
  • 4
  • 50
  • 102
  • Check this. what do you asking doesnt make sense https://stackoverflow.com/questions/1677990/what-is-the-difference-between-focus-and-active – Whatatimetobealive Feb 09 '19 at 07:18
  • I checked it out and it does not help my issue, what I'm trying to say is, when I set some styling on :focus, I dont want it to get applied when I click on the button (:active state). Its in the fiddle you can see... – user1234 Feb 09 '19 at 08:27
  • Than just simply revert `text-decoration:none` on `:active` state. – Whatatimetobealive Feb 09 '19 at 08:59

1 Answers1

0

If I understand correctly you're looking something like this.

 button { font-weight: normal; color: black; }
  button:focus { 
   background-color: red; 
   text-decoration: underline;
  }
  button:active{
    background-color: #b0bfc6;
    text-decoration: none;
  }
Whatatimetobealive
  • 1,353
  • 10
  • 15
  • thanks for your suggestion, actually the issue when I key down, it does not have the underline, but when I'm releasing it changes the bg to red with underline...you can try that here: https://jsfiddle.net/f02brt8v/ – user1234 Feb 09 '19 at 18:24