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

Dev Shed Forums Sponsor:

March 13th, 2013, 09:35 PM

we5inelgr

Contributing User

Join Date: Jun 2012

Posts: 106

Time spent in forums: 1 Day 24 m 29 sec
Reputation Power: 1

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.

March 14th, 2013, 02:28 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

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. I'm available for hire at Dynamic Site Solutions.

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).

March 14th, 2013, 01:00 PM

we5inelgr

Contributing User

Join Date: Jun 2012

Posts: 106

Time spent in forums: 1 Day 24 m 29 sec
Reputation Power: 1

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!

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

Developer Shed Advertisers and Affiliates