Suppress checkboxes in CSS?
March 14, 2008 11:05 AM Subscribe
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?
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?
Response by poster: And now I feel like a moron for not finding that via Google. Thanks!
posted by middleclasstool at 11:16 AM on March 14, 2008
posted by middleclasstool at 11:16 AM on March 14, 2008
SemiSophos' method will work in IE7. Just not in IE6. For universal support I'd class the checkbox inputs:
posted by Ridge at 11:20 AM on March 14, 2008
class="check" for example, and style that with display:none.posted by Ridge at 11:20 AM on March 14, 2008
Best answer: Styling form controls and Styling even more form controls.
posted by kirkaracha at 11:26 AM on March 14, 2008 [3 favorites]
posted by kirkaracha at 11:26 AM on March 14, 2008 [3 favorites]
Response by poster: 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, 2008
posted by middleclasstool at 11:28 AM on March 14, 2008
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, 2008
posted by katrielalex at 11:54 AM on March 14, 2008
« Older Getting the gunk out of my lungs | What's the standard charge against Standard Oil... Newer »
This thread is closed to new comments.
input[type=checkbox] { display: none; }Won't work in IE. Should work in Firefox.
posted by SemiSophos at 11:10 AM on March 14, 2008