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

Question

当我在复选框上使用transform时，复选框变得模糊。

没有css变换

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

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

用css转换

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

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

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

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我无法找到解决方法。