html - 删除css中复选框的“框”

Question

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

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:hiddendisplay:none。

演示

Answer 2

如果您想出于 JS 效果的目的将一段文本视为按钮，您可能希望将文本包装在一个跨度中，并将您尝试触发的函数分配给该跨度的 onclick 处理程序。如果您使用的是 jQuery，那可能看起来像

<script type="text/javascript">
// Your function:
function doSomething() {
    alert('Hello!');
}

// jQuery's on-document-ready function, to assign the
// function doSomething to the click handler of the span.
$(document).ready(function() {
    $("span#myButtonText").click(function() {
        doSomething();
    });
});
</script>

<p><span id="myButtonText">Click Me for an Alert!</span></p>

Answer 3

利用appearance: none;

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