#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    146
    Rep Power
    2

    Question Highlight text of a radio button selection? I.E. Compatible


    Hi all,

    What I'm looking to do is "highlight" the text next to a radio button when it's selected. Not the radio button, but the text next to it. What I've got so far is problematic using I.E. (8 or 9). If I select the first radio button, the highlighting is delayed for about 20 seconds. The second radio button seems to highlight right away.

    The HTML:
    Code:
    <div class="radioBtnsColor">
    <input type="radio" id="radio1" name="colorOption" value="1"> &nbsp;<label for="radio1">Some Text Here For Radio Button 1</label><p>
    <input type="radio" id="radio2" name="colorOption" value="2"> &nbsp;<label for="radio2">Some Text Here For Radio Button 2</label><p>
    </div>
    The CSS:
    Code:
    .radioBtnsColor input[type="radio"]:checked + label { 
        BORDER-RIGHT: #000000 1px solid;
        BORDER-TOP: #000000 1px solid;
        BORDER-LEFT: #000000 1px solid;
        BORDER-BOTTOM: #000000 1px solid;
        BACKGROUND: #FFFF66;
    }
    How can this be improved to be I.E. compatable?

    Maybe I should scrap trying to get the <label> and do something with <span> instead?
    Last edited by we5inelgr; March 13th, 2013 at 09:45 PM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    No, please don't remove the <label>s. I can not overstate their importance.

    Also please use <p> elements properly. In this case I would suggest that it would be better to either replace them with an <ul> (and <li>s) or just place remove them. Likewise, please don't use non-breaking spaces to add spacing when you can use CSS to do so.

    Try the following. If it's still too slow in IE, a little JavaScript could be added to handle this.
    Code:
    <div class="radioBtnsColor">
    <label for="radio1"><input type="radio" id="radio1" name="colorOption" value="1"> <span class="label">Some Text Here For Radio Button 1</span></label>
    <label for="radio2"><input type="radio" id="radio2" name="colorOption" value="2"> <span class="label">Some Text Here For Radio Button 2</span></label>
    </div>
    Code:
    .radioBtnsColor label {
      display: block;
    }
    .radioBtnsColor .label {
      margin-left: .3em;
    }
    .radioBtnsColor input[type="radio"]:checked + .label {
      border: #000 1px solid;
      background: #FF6;
    }
    P.S. I hope you copied that style rule out of IE's developer tools, because specifying each border's edge separately is so inefficient.

    Comments on this post

    • we5inelgr agrees : Very helpful, very efficient.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    146
    Rep Power
    2

    Thumbs up


    wow, awesome advice Kravvitz! much appreciated. and yes, I see how inefficient it is to list each border individually if the are all the same anyway.

    Thank you!

IMN logo majestic logo threadwatch logo seochat tools logo