无法专注于标签答案

【问题标题】：Cannot focus on label无法专注于标签
【发布时间】：2015-12-14 14:57:47
【问题描述】：

我使用 materializecss 已经有一段时间了，当我尝试通过在键盘上按 Tab 来浏览我的网站时遇到了这个问题。

materializecss的checkbox是CSS自定义checkbox，当我为checkbox的标签设置tabindex时，只有在Firefox浏览器使用tab时才有效。

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

有什么办法可以解决这个问题吗？

【问题讨论】：

标签索引不应该在输入中而不是标签中吗？
@DeblatonJean-Philippe 这是一个 CSS 自定义复选框。原始复选框设置为 0 不透明度。关注标签会将其与复选框相关联。
Chrome 漏洞百出。对不起:(
@MarcosPérezGude 无论如何都要设置复选框而不是自定义复选框的样式？我如何自定义它以获得材质外观？
不，原生组件不是完全可定制的。如您所知，您的解决方案是伪造的复选框。

标签： jquery html css google-chrome materialize

【解决方案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>

【讨论】：