移除“盒子".CSS中的复选框 [英] Removing the "box" of a checkbox in css

问题描述

我正在尝试删除复选框字段的实际框，仅使文本可单击.如何使用JS和CSS执行此操作?我开始使用按钮，但是我切换到复选框，因为该框的状态"比按钮更容易找到.但是，现在我正在使用css来完善页面，以更好地设置格式和布局，这些框正在逐渐成为障碍，我希望在没有框的情况下也可以单击文本.

I am trying to remove the actual box of a checkbox field, and just make the text clickable. How can I do this with JS and css? I started using buttons, but I switched to checkboxes because the "state" of the box is easier to find out than a button. But now that I am polishing up the page with css for better formatting and layout, The boxes are getting in the way, and I would prefer just for the text to be clickable without a box present.

推荐答案

您可以使用 display:none;

HTML

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

CSS

#a {
    display: none; /* visibility: hidden works too */
}​

请参见此处 visibility:hidden 和 display:none .

See here for difference between visibility:hidden and display:none.

演示

这篇关于移除“盒子".CSS中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！