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

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

/* 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 */
}​

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

DEMO