SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    0 Post(s)
    0 Thread(s)

    How to make form labels change color when items are checked or selected.

    I'm sitting here and the idea just came to mind.

    Is there a way to make a form label change color when, eg: a checkbox is checked, a menu/list item selected, or a radio button clicked?

    Let say the label was dark gray and then will change to green when it is selected.

    The bad news is I do not have the slightest clue as to how this is going to happen or if it is possible with Javascript.
    I searched Google but nothing - any ideas? Is this possible?

    Thanks everyone!


  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    4 Thread(s)
    With css3 you can use the :checked pseudo-selector.

    Otherwise, jQuery is a popular library that can make the job easier.
    For example:
    Whoops, that was left in the clipboard buffer.

    For example:
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Alabama, USA
    0 Post(s)
    0 Thread(s)
    Another quickie

    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type='text/css'>
    .lbl-unfocused {
      color: #000;
      font-weight: normal;
    .lbl-focused {
      color: #090;
      font-weight: bold;
    <script type='text/javascript'>
    window.onload = function() {
      var f = document.getElementById('form-0');
      if (f) {
        f.onsubmit = formSubmit;
        xEachNum('chk-', 0, null,
          function (c) {
            c.onfocus = chkFocus;
            c.onblur = chkBlur;
    function chkFocus() {
      lblFocus(this, 'lbl-focused');
    function chkBlur() {
      lblFocus(this, 'lbl-unfocused');
    function lblFocus(chk, cls) {
      var l, a ='-');
      l = document.getElementById('lbl-' + a[1]);
      l.className = cls;
    function formSubmit() {
      return false;
    function xEachNum(p,i,d,f)
      var e = document.getElementById(p + i);
      while (e) {
        f(e, i, d);
        e = document.getElementById(p + (++i));
    <form method="post" id="form-0" action="#">
      <p><input type="checkbox" id="chk-0" value="Red">   <label id='lbl-0' for='chk-0' class='lbl-unfocused'>Red  </label></p>
      <p><input type="checkbox" id="chk-1" value="Blue">  <label id='lbl-1' for='chk-1' class='lbl-unfocused'>Blue </label></p>
      <p><input type="checkbox" id="chk-2" value="Green"> <label id='lbl-2' for='chk-2' class='lbl-unfocused'>Green</label></p>
      <p><input type="checkbox" id="chk-3" value="Gray">  <label id='lbl-3' for='chk-3' class='lbl-unfocused'>Gray </label></p>
      <p><input type="checkbox" id="chk-4" value="None">  <label id='lbl-4' for='chk-4' class='lbl-unfocused'>None </label></p>
      <p><input type="submit"></p>


Posting Permissions

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