Suppress checkboxes in CSS?

March 14, 2008 11:05 AM

Is it possible to make checkboxes invisible using CSS?

I've been using a TiddlyWiki for keeping my life in order (GTD), recently fell off the wagon, and am now getting back on using a newer-generation TW.

I've thrown together a stylesheet for printing on 3x5 index cards that seems to work fine, but all the "next action" items have checkboxes next to them that you check when you've completed that action, and these take up tons of real estate on the cards when they print. I've got the text resized smaller for cards, so what I'd like to do is come up with a CSS statement that will either do the equivalent of "display:none" on the boxes themselves, or failing that, resize them down a bit.

I know very little CSS, but Googling fails me so far, so I'm guessing the answer is "no." Do any of you web gurus have the ability to pleasantly surprise me?

posted by middleclasstool to computers & internet (7 comments total)

input[type=checkbox] { display: none; }

Won't work in IE. Should work in Firefox.
posted by SemiSophos at 11:10 AM on March 14

And now I feel like a moron for not finding that via Google. Thanks!
posted by middleclasstool at 11:16 AM on March 14

SemiSophos' method will work in IE7. Just not in IE6. For universal support I'd class the checkbox inputs: class="check" for example, and style that with display:none.
posted by Ridge at 11:20 AM on March 14

That should be "Just not in IE6 and below".
posted by Ridge at 11:21 AM on March 14

Styling form controls and Styling even more form controls.
posted by kirkaracha at 11:26 AM on March 14 [3 favorites]

Compatibility's not really an issue, as it's strictly for my use, and I'm a Firefox user. I knew it could be done with a class, but given that this is a pre-existing TW framework that's occasionally updated, I didn't want to get too deep in the guts -- the print stylesheet has its own tidder that you can just edit, save, f5, and boom, it's changed.
posted by middleclasstool at 11:28 AM on March 14

Oh, by the way, if you use "visibility: hidden;" it will leave the checkbox on the page but not show it (i.e. text still wraps etc). Using "display: none;" will remove it entirely.
posted by katrielalex at 11:54 AM on March 14