Removing the “box” of a checkbox in 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.

回答1:

You can just hide it with CSS using 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 */
}​

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

DEMO

回答2:

If you're wanting to treat a piece of text like a button for the purposes of a JS effect, you may want to wrap the text in a span and assign the function you're trying to fire to the onclick handler for that span. If you were using, say, jQuery, that might look like

<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>

来源：https://stackoverflow.com/questions/11068699/removing-the-box-of-a-checkbox-in-css