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