Web Analytics Made Easy -
StatCounter Custom checkboxes? - CodingForum


No announcement yet.

Custom checkboxes?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom checkboxes?

    I'm not exactly sure how to achieve what I want to do. I'm hoping you guys will have some pointers/ideas. I have a form with a series of checkbox inputs. The user has to check the box to select that value. What I want to do though is hide the checkbox completely and just have the words, and when they click on the word the hidden checkbox is selected.

    Bonus points if I can make the background of that selected word turn yellow.

    Appreciate any help!

  • #2
    Alrighty I have that figured out. The only part I'm still struggling with is getting the background color of the label to change when the checkbox is clicked.

    The CSS
    .checklist {
    border: 1px solid #ccc;
    list-style: none;
    height: 20em;
    overflow: auto;
    width: 16em;
    .checklist, .checklist li { margin: 0; padding: 0; }
    .checklist label {
    display: block;
    padding-left: 25px;
    text-indent: -25px;
    .checklist label:hover { background: #777; color: #fff; }
    .hide { display: none;}
    Example HTML
    <ul class="checklist">
    <input type="checkbox" name="trusting" class="hide" value="yes"> Trusting </label></li>
    <input type="checkbox" name="feels_powerless" class="hide" value="yes"> Feels powerless </label></li>
    <input type="checkbox" name="unforgiving" class="hide" value="yes"> Unforgiving </label></li>
    <input type="checkbox" name="addictive" class="hide" value="yes"> Addictive </label></li>


    • #3
      Yes, it can be done relatively easy once you know how. Mainly cause I've done it but then never used it so I have to look it up in my archives. Essentially you can place the button in front of the text but use 'visibility:hidden'. The checkbox can still be check, though. The real effort is sizing the checkbox so it overlays the text.

      That's from memory. Not sure I have all the details right.
      Is IE9 a modern browser?
      IE9 is at least 2 years behind the modern web.


      • #4
        Yeah thanks! I got that part working with display:hidden. Do you know how I can get the background color of the label to change though when the checkbox is checked?


        • #5
          You weren't doing exactly what I was doing but a way that might work is with css selectors maybe? I have to think about that.
          Is IE9 a modern browser?
          IE9 is at least 2 years behind the modern web.


          • #6
            You can’t change the background color of a checkbox or radio button. Especially in the Mac OS they look more like glass buttons than flat items as in IE 6. (→http://456bereastreet.com/archive/20...form_controls/) Styling form controls is very limited and partly for a good reason. However, there are workarounds where the form controls are replaced by regular elements (whch you can style at free will) that do change the (hidden) form controls: http://emblematiq.com/projects/niceforms/
            Stop solving problems you don’t yet have!


            • #7
              he's right you can't change the background color of the checkbox and radio button


              • #8
                Sure you can. We're talking about the background color of the label, not the checkbox. There's no reason not to give it any color you please.

                Just add the following functions
                function getInput(label){
                	var child = label.firstChild;
                	while ( typeof(child) !== "undefined" ){
                		if ( child.nodeType == 1 ) return child;
                		child = child.nextSibling;
                	return false;
                function toggleBG(label){
                	label.style.backgroundColor = getInput(label).checked ? '#cccccc' : '#ffffff';
                and call toggleBG from the onlick event of the labels:
                <label onclick="toggleBG(this);">
                Better yet programatically add the onclick listener to all your labels.

                You should take the rollover stuff out of the CSS though, and put it in the JS too, so it won't be broken.

                And zooeyglass, I am looking forward to finding an actually helpful post of yours.
                Last edited by venegal; Apr 16, 2009, 08:45 AM.
                .My new Javascript tutorial site: http://reallifejs.com/
                .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
                .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback