Question

我一直在使用materializecss很长一段时间，当我试图通过键盘上的标签浏览我的网站时遇到了这个问题。

materializecss的复选框是一个CSS自定义复选框，当我为复选框的标签设置tabindex时，它仅在我使用tab时在Firefox浏览器中有效。

<input type="checkbox" class="group1" id="opt1" />
<label for="opt1" class="group1" tabindex="0">1</label>

有没有可以解决这个问题？

Answer 1

我使用css解决了这个问题。

.wrapper {
  margin: 100px;
}

[type="checkbox"]:not(:checked):focus +label:before {
    border: 1px solid red;  
}

[type="checkbox"]:checked:focus +label:before  {
 
    top: -4px;
    left: -3px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.0/css/materialize.min.css" rel="stylesheet"/>
<div class="wrapper">
  <input type="checkbox" class="group1" id="opt1" />
  <label for="opt1" class="group1" tabindex="0">1</label>

  <input type="checkbox" class="group1" id="opt2" />
  <label for="opt2" class="group1" tabindex="0">2</label>
</div>

不能专注于标签

1 个答案: