时间戳

首页 > 解决方案 > 是否可以隐藏复选框的框？

css - 是否可以隐藏复选框的框？

问题描述

我有一些具有这种形式的复选框，

<label><input type="checkbox" name="Todos_dias" class="dayFilter">Todos</label>

有了<label>外部，我可以选中单击单词的复选框，而不仅仅是单击框。现在我想要的是隐藏盒子，然后说出这个词。

我怎样才能做到这一点？我找到了这篇文章，但它对我不起作用，因为如果我使用display:none或visibility:hidden复选框停止工作。

非常感谢

标签： css

解决方案

将checkbox widthand设置height为 0 

[type="checkbox"]{
  width: 0;
  height: 0;
}
<label><input type="checkbox" name="Todos_dias" class="dayFilter">Todos</label>

如果要保留标签位置，请使用opacity: 0;

[type="checkbox"]{
  opacity: 0;
}
<label><input type="checkbox" name="Todos_dias" class="dayFilter">Todos</label>

推荐阅读