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.

score 26 · Accepted Answer · edited Feb 15 '22 at 17:11

26

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

edited Feb 15 '22 at 17:11

chris Frisina

19,086
22
87
167

answered Jun 17 '12 at 03:28

sachleen

30,730
8
78
73

If you use Chrome (FF and IE have it too though I don't use either) you can hit `F12` to pull up the dev tools that has a console. Or just `Ctrl Shift J` to go straight to the console. Makes debugging way easier! – sachleen Jun 17 '12 at 03:35
AH! visibility, not Display! How would I apply this to all checkboxes? Would I have to set their classes to the same? or could I use a selector for the checkbox themselves? – chris Frisina Jun 17 '12 at 03:41
2

@chrisFrisina Change the `#a` CSS selector to `input[type="checkbox"]` if you want to style all checkboxes in your page without applying classes. – Fabrício Matté Jun 17 '12 at 03:46
1

err actually I had display but changed it. Either will work, the difference is visibility keeps the placeholder of the element where display will collapse it. – sachleen Jun 17 '12 at 03:48

score 1 · Answer 2 · answered Feb 10 '22 at 10:07

1

Use appearance: none;

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

answered Feb 10 '22 at 10:07

A Jar of Clay

5,622
6
25
39

score 0 · Answer 3 · answered Jun 17 '12 at 03:36

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>

Removing the "box" of a checkbox in css

3 Answers3

Linked