CSS伪类：按钮点击后焦点

Question

我正在使用button的一些基本CSS动画。问题是: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

如果您不想在按Tab键

时按钮可以聚焦，请在按钮上使用tabIndex="-1"

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

Answer 2

如果按钮处于活动状态，则它将始终同时聚焦。

因此，只需提供:active规则并且根本不提供:focus规则。

Answer 3

如果不使用JavaScript，您将无法获得可访问或具有生产价值的解决方案。

如果我们以面值的形式实现动画的目的，您将模拟将项目添加到购物车的功能。如果这是真的，那么您只想加载添加到卡片中的＆＃39;实际添加项目后动画的一部分。 CSS本身并不知道它是否真实，所以你永远不会只用CSS来获得一个可行的解决方案。

遗憾的是，这不是您正在寻找的答案，因为它涉及JavaScript，但它是您希望实现的解决方案。

＆＃13;

＆＃13;

var myBtn = document.getElementById('rent_me');

myBtn.addEventListener('click', function () {

  if ( myBtn.getAttribute('aria-pressed') === 'false') {
    myBtn.setAttribute('aria-pressed', 'true');
    myBtn.classList.add('loading');
    myBtn.querySelector('.init-text').setAttribute('aria-hidden', 'true');

    /*
      This is to simulate the function of actually
      adding this 'item' to the shopping cart.
      Wouldn't be used outside of this example
    */

    setTimeout( function () {
      myBtn.classList.remove('loading');
      myBtn.querySelector('.added-text').setAttribute('aria-hidden', 'false')
    }, 2000);
  }
  else {
    myBtn.classList.remove('loading');
    myBtn.setAttribute('aria-pressed', 'false');
    myBtn.querySelector('.init-text').setAttribute('aria-hidden', 'false');
    myBtn.querySelector('.added-text').setAttribute('aria-hidden', 'true')
  }
});

＆＃13;

body {
  padding: 20px;
  text-align: center;
}

/* setup the button styling */
button {
  background: #c33;
  border: 2px solid rgba(0,0,0,0);
  width: 150px;
  height: 40px;
  padding: 8px;
  position: relative;
  color: #fff;
  overflow: hidden;
  text-align: center;
}

/* the text inside the button is placed within spans that get pushed in/out the bounding of the button with text-indent and overflow hidden */
button span {
  position: absolute;
  left: 0;
  width: 100%;
  white-space: nowrap;
  transition:
    text-indent .2s ease-in-out;
  top: 50%;
  transform: translateY(-50%);
}

/* start with rent me text in view */
.init-text {
  text-indent: 0%;
}

/* added to cart text pushed off to the right */
.added-text {
  text-indent: 200%;
}

/* buttons need a focus state so keyboard users know they've 'focused it'
button:focus {
  border: 2px solid #000;
}

/* when the button has been activated, JS will set the aria-pressed value to true, changing the background color of the button */
button[aria-pressed="true"] {
  background: green;
}

/* if the button has been pressed, get the 'rent me' text out of view */
button[aria-pressed="true"] .init-text {
  text-indent: -200%;
}

/* once the button is no longer in the loading phase, bring the 'added to cart' text into view */
button[aria-pressed="true"]:not(.loading) .added-text {
  text-indent: 0%;
}

/* when the button is loading, show a spinner */
.loading:before {
  transform-origin: center center;
  animation: rotate 1s infinite;
  position: absolute;
  content: "\21BB";
  left: 0;
  right: 0;
  margin: auto;
  speak: none;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
}


/* animation for the spinner */
@keyframes rotate {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

＆＃13;

<button type="button" id="rent_me" aria-pressed="false" aria-live="polite" aria-atomic="true">
  <span class="init-text">
    Rent Me
  </span>
  <span class="added-text">
    Added to Cart
  </span>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

为避免在开始时使用Tab键选择按钮，您可以尝试避免使用button元素，而是使用带有{{div的{​​{1}}来复制相同的行为3}}属性。

专门使用tabindex = "-1"来避免通过标签键进行切换。

参考代码：

div {
  background: #c33;
  width: 150px;
  height: 30px;
  padding-top: 6px;
  border: 0;
  color: #fff;
  display: inline-block;
  align-items: flex-start;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
  outline: 0;
}

div:first-child {
  margin-left: 1px;
}

div:after {
  content: 'RENT ME';
  display: block;
  z-index: 10;
}

div:focus {
  background: green;
}

div:focus:after {
  display: block;
  animation: shake 1s linear, revert 2s 1s;
  -webkit-animation: shake 1s linear, revert 2s 1s;
  position: relative;
}

@keyframes shake {
  from {
    content: "O";
    font-family: FontAwesome;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    content: "O";
    font-family: FontAwesome;
    transform: rotate(360deg);
    -webkit-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;
  }
}

<div tabindex="-1"></div>
<div tabindex="-1"></div>

Answer 5

我的答案与其他人不同。

＆＃13;

＆＃13;

$("button").focus(function() {
  $(document).on('keydown', function(event) {
    if (event.keyCode == 9) { //tab pressed
      event.preventDefault(); // stops its action
    }
  })
});

$("button").blur(function() {
  $("this").unbind();
});

＆＃13;

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;
}

body[data-whatinput="keyboard"] button:focus {
  background: red;
}

@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;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/4.1.1/what-input.min.js"></script>
<button tabindex="-1"></button>
<button tabindex="-1"></button>

＆＃13;

＆＃13;

＆＃13;

Answer 6

您可以临时设置绿色背景。这是你想要的吗？

＆＃13;

＆＃13;

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

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

button:active,
button:focus {
    animation: green-bg 4s step-start;
}

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;
  }
}

@keyframes green-bg {
  from {
    background: green;
  }
  to {
    background: green;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;