Styling checkbox

HTML & CSS
1

I’m trying to style a checkbox. All I want is for the outline of the box itself to be red or orange.

I started with Chris Coyier’s article: http://css-tricks.com/the-checkbox-hack/

It worked fine unless it was at the bottom of a page, then when you clicked the “checkbox” (i.e., div), it would jump to the top of the page as if you had gone to a bookmark (probably because of something I added). I discovered that if I changed the input style to visibility:hidden or display:none, it seems to work just fine without jumping. Is there any problem with doing it that way? My Javascript person tells me it won’t affect the functionality but I’m concerned about possible CSS issues in other browsers, etc.

Also, I’d like to put a gradient in the background of the “checkbox” to make it look more like the real thing, but I haven’t found a way to do that that still allows you to “check” the div. Any ideas on that?

A demo of what I’m talking about is here - the orange box to the right of the signature line at the bottom: http://demo.psybooks.com/test.php

2
Off Topic:

Your demo page requires a login.

3

Sorry. This one should be ok:

http://www.shrink-art.com/test/test.php

I also feel like my code is bloated and that there’s bound to be a better way to do this - even if what I have works. Would appreciate all ideas. Thanks.

4

It is sort of playing with fire to mess with form elements like this, as Coyier points out.

Anyhow, I can’'t quite tell what you are trying to do on that page.

5

All I’m trying to accomplish is to make a red/orange checkbox. Any reliable way to do that or should I just leave it alone? That bottom line already has a plain checkbox at the beginning where the user “signs” the note. The orange div “checkbox” at the end is a way to mark the note as important. So my goal is to find a way to differentiate the two checkboxes so it’s not confusing. I put the exclamation point by the “mark as important” checkbox but I wasn’t sure that was enough.

Ignore the stuff at the top - that’s just dummy stuff. The part I’m asking about is the bottom line that starts with “Electronic Signature”.

6

this is quite simple to do.

 
	 .fakeChk { margin-bottom: 1em}
     .fakeChk input{ position: absolute; left:-99999em;}
     .fakeChk label {display:inline-block;}
     .fakeChk label:before { content:'';   border: 1px solid red; background:orange;  height: 15px; width: 15px; margin-right:.5em;  float:left;  font-size: 25px;  text-shadow: 1px 1px 0 #fff}
     .fakeChk input:checked + label:before { background:red;   border-color:orange;  content:'✓';   line-height:.8; text-indent: -.125em }
.fakeChk label span{ color:tan; font-style:italic;}
 
		<div class="fakeChk">
			<input id='theBox1' type='checkbox'>
			<label for='theBox1'>Electronic Signature: <span>I, Jane Doe, Ph.D., attest that the information in this note is true, correct and complete to the best of my knowledge. Electronically signed on August 11, 2012 at 10:34pm EDT.</span></label>

your chief error was not to give the checkbox and ID and the label a corresponding FOR attribute. And just to totally mimic the behaviour, the label MUST be a have block, table (whatever), or inline-block rendering content (otherwise you can click on the label, but not the fake checkbox. :confused: . You can style the :before pseudo element ( which is in fact the fake checkbox) anyway you want… gradients, bg, images, etc. I wrap

hope that helps

7

It was exactly what I needed. Thanks, dresden_phoenix.