Removing the "box" of a checkbox in css

Question

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.

Answer 1

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>

Answer 2

Use appearance: none;

Note: Not compatible or consistent with all browsers, see the MDN docs