Question

我正在尝试删除复选框字段的实际框，只是使文本可以点击。我怎么能用JS和css做到这一点？我开始使用按钮，但我切换到复选框，因为盒子的“状态”比按钮更容易找到。但是现在我正在用css对页面进行抛光以获得更好的格式和布局，这些方框正在阻碍，我更希望文本在没有框的情况下可以点击。

Answer 1

您可以使用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 */
}

请参阅此处查看difference between visibility:hidden and display:none。

DEMO

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>

删除css中复选框的“框”

2 个答案: