CSS转换模糊了Firefox 41.0.1上的复选框

Question

当我在复选框中使用navButtonAdd时，复选框变得模糊。

没有css转换

＆＃13;

＆＃13;

transform

＆＃13;

.box {
  position: absolute;
  top: 50%;
  left: 50%;
}

＆＃13;

＆＃13;

＆＃13;

使用css转换

＆＃13;

＆＃13;

<div class="box">
  <label>
    <input type="checkbox" name="check"><span> Check me</span>
  </label>
</div>

＆＃13;

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

＆＃13;

＆＃13;

问题的原因是什么以及如何解决？

Answer 1

我认为这是您所看到的浏览器默认焦点状态。您可以通过覆盖状态来禁用它。 element:focus{outline:none;}

Answer 2

我认为这是因为它包含在标签中。如果您不需要可点击标签，请执行以下操作：

<div class="box">
    <input type="checkbox" name="check" id="check"><label for="check">Check me</label>
</div>

单击标签时，您可以添加一些js来选择复选框。我无法用css找到解决方法。