Effect: focus overlapping: active

Question

Effect: focus overlapping: active

Navigation

#1 by (2 votes)

1

I can see the effect of :active even though I have :focus? I'm trying here but when I click on the element the effect of :active is not shown jumping straight to :focus .

.btn{
  color: black;
  background-color: #FFFFFF;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  border-color: #CCC;
  outline: none;
}
.btn:active{
  color: #333;
  background-color: red;
}
.btn:focus{
  color: #333;
  background-color: #e6e6e6;
}

<button class="btn">button</button>

html html5 css css3

asked by anonymous 18.01.2018 / 01:43

1 answer

Map classes that inherit the Id of another Entity class - EF Core Shift when closing application

score 2 · Accepted Answer

Change the order in CSS. Put :focus before :active .

.btn:focus{
  color: #333;
  background-color: #e6e6e6;
}
.btn:active{
  color: #333;
  background-color: red;
}

Why before?

CSS works from top to bottom. When you declare a style before for one element and another after, what comes next will overwrite what was declared before. When you click the button, it will have the two pseudo-classes : :active and :focus , so whatever comes next will have priority over the effect on the element. Changing the order while you are clicking the button will have the effect of :active above :focus , and when you release click, it will only contain :focus . When you click outside the button, it will lose :focus and return to normal.

See:

.btn{
  color: black;
  background-color: #FFFFFF;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  border-color: #CCC;
  outline: none;
}
.btn:focus{
  color: #333;
  background-color: #e6e6e6;
}
.btn:active{
  color: #333;
  background-color: red;
}

<button class="btn">button</button>