CSS伪类:按钮点击后焦点

Question

我正在使用一些基本的CSS动画button.问题是:focus当我们在键盘上按Tab键时,伪类甚至可以工作.所以我想这:focus应该只在我点击按钮时才有效,即仅在激活时.

这是代码:

button {
  background: #c33;
  width: 150px;
  height: 30px;
  border: 0;
  color: #fff;
}

button:after {
  content: 'RENT ME';
  display: block;
}

button:active,
button:focus {
  background: green;
}

button:active:after,
button:focus:after {
  display: block;
  animation: shake 1s linear, revert 2s 1s;
  position: relative;
}

@keyframes shake {
  from {
    content: "O";
    font-family: FontAwesome;
    transform: rotate(0deg);
  }
  to {
    content: "O";
    font-family: FontAwesome;
    transform: rotate(360deg);
  }
}

@keyframes revert {
  0% {
    content: 'ADDED TO CART';
    left: -60px
  }
  50% {
    content: 'ADDED TO CART';
    left: 0px;
  }
  100% {
    content: 'ADDED TO CART';
    left: 0px;
  }
}

<button></button>
<button></button>

在上面的代码中,按钮变为green按下我想要避免的选项卡.是否有纯CSS解决方案.

的jsfiddle

Answer 1

使用tabIndex="-1"上的按钮,如果你不希望按钮压片的时候成为焦点

<button tabIndex="-1"></button>

Answer 2

如果按钮处于活动状态，那么它将始终同时获得焦点。

所以只提供一条:active规则，也可以不提供任何:focus规则。