SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Styling checkbox

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Your demo page requires a login.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    this is quite simple to do.
    Code:
     
    	 .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. :/ . 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. #7
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was exactly what I needed. Thanks, dresden_phoenix.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •