SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Chaning the label's style when you select a radio button?

    Hi,

    Not sure if this is a Javascript thing or CSS (hopefully CSS) - I was just wondering if there's anyway so when you select a radio button, it'll change the style of the associated label? Would be a nice touch.

    Cheers

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need javascript to do this.

    Here is a rough example but this really is a question for the javascript forum

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    inpHover = function() {
        var inpEls = document.getElementById("form1").getElementsByTagName("INPUT");
        for (var i=0; i<inpEls.length; i++) {
            inpEls[i].onclick=function() {
                var c = " " + this.className + " ";
                if (c.indexOf(" " + "over" + " ") == -1){
                this.className+=" over";
            }else{
                this.className=this.className.replace(new RegExp("( )?over\\b"), "");
            }    
            }
            inpEls[i].onblur=function() {
                this.className=this.className.replace(new RegExp("( )?over\\b"), "");
            }
        }
        var divEls = document.getElementById("form1").getElementsByTagName("DIV");
        for (var i=0; i<divEls.length; i++) {
            divEls[i].onmouseover=function() {
                this.className+=" over2";
            }
            divEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp("( )?over2\\b"), "");
            }
        }
    }
    
    
    // addLoadEvent 
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    addLoadEvent(inpHover);
    
    //--><!]]></script>
    <style type="text/css">
    #outer{
        position:relative;
        left:50&#37;;
        float:left;
    }
    #form1{
        border:1px solid #000;
        padding:10px 20px;
        position:relative;
        left:-50%;
        text-align:right;
    }
    input{position:relative;}/* ie needs this*/
    h1{text-align:center}
    label{padding:2px;margin:2px;}
    input#submit{
        border:1px solid blue;
        padding:1px;
        background:#fff;
    }
    input.over, .over2 input,.over2 label{background:#fcf!important}
    .radio span{border:3px solid #fff;padding:3px}
    .over2 span{border:3px solid #fcf;}
    div{margin:10px 0;}
    </style>
    </head>
    <body>
    <h1>Center an element of no specified width</h1>
    <div id="outer">
        <form id="form1" method="post" action="">
            <div>
                <label for="t1">Name: </label>
                <input type="text" name="t1" id="t1" />
            </div>
            <div>
                <label for="t2">Password: </label>
                <input type="password" name="t2" id="t2" />
            </div>
            <div class="radio">
                <span><input name="radiobutton" type="radio" value="radiobutton" id="radiobutton" /></span>
                <label for="radiobutton">test highlight</label>
            </div>
            <div>
                <input  type="submit" id="submit" name="Submit" value="Submit" />
            </div>
        </form>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the great reply Paul O'B, I was kind of after something that'd change the label if the radio was selected rather than just hovered, but your example will be a really fantastic starting point, I'll have a play around with it now

    Thanks again

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I was kind of after something that'd change the label if the radio was selected rather than just hovered
    The JS above does both - try clicking a form element

    The first part handles the onlclick so just remove the mouseover/out routines.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oooh, you're a star, thank you very much Paul


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
  •