删除CSS中复选框的“框”

Question

我正在尝试删除复选框字段的实际框，只是使文本可点击。我怎样才能用 JS 和 css 做到这一点？我开始使用按钮，但后来改用复选框，因为复选框的“状态”比按钮更容易发现。但是现在我正在用 css 完善页面以获得更好的格式和布局，这些框妨碍了我，我更希望文本在没有框的情况下可以点击。

原文由 chris Frisina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 CSS 隐藏它 display: none;

HTML

 <input type="checkbox" name="a" id="a" value="a" /><label for="a">asdf</label>​

CSS

 /* for all inputs of type checkbox */
input[type="checkbox"]  {
   display: none;
}

/* for just the single element by id */
#a {
    display: none;
    /* visibility: hidden      works too */
}​

请参阅此处了解 visibility:hidden 和 display:none 之间的区别。

演示

原文由 sachleen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 appearance: none;

注意：与所有浏览器不兼容或一致，请参阅 MDN 文档

原文由 A Jar of Clay 发布，翻译遵循 CC BY-SA 4.0 许可协议