Member Avatar for Violet_82

quick question.Take this html

<form id="the_form">
    <input type="checkbox" value="ideal" name="ideal_drive"  id="ideal"><label for="ideal">This is a test only only</label><br>
...

Say I want to select the text in the label and give it a different colour. I tried this rule

#the_form label[for='ideal']{
    color:yellow;
}

It works ok but not in IE7. SO, I was thinking to use the :first-child selector:

#the_form label:first-child{
    color:yellow;
}

but it doesn't work at all.

Any idea what I can use to make sure it works on every browser?
thanks

  • 4 Contributors
  • 6 Replies
  • 132 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Short answer: yes — a label can have an id or class, and that is the simplest, most compatible way to style a single label across old browsers (including IE7).

As noted, :first-child is unreliable in older IE. If you prefer to stay CSS-only, two practical options:

  • Give the label its own id/class and target that in CSS. This is valid HTML and requires no selectors that older browsers choke on.
/* give the label an id or class in the markup and style it */
#idealLabel { color: yellow; }
  • Use the adjacent sibling selector to target the label that immediately follows the checkbox. This works in IE7 as long as the label is the next sibling (no other elements between the input and label).
#the_form input[type="checkbox"] + label { color: yellow; }

Troubleshooting tips and gotchas:

  • Ensure the document is rendered in standards mode (include a proper doctype like <!DOCTYPE html>) — attribute selectors and many CSS selectors behave poorly in quirks mode. See MDN on quirks vs standards: https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode
  • For selector support details, check the MDN pages (for example :first-child support): https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
  • If the goal is to change the label only when the checkbox is checked, modern browsers support input:checked + label, but IE7 does not — that requires JavaScript.
  • If only one label needs a different color, using an id is the simplest and most future-proof approach. If you have many, use classes.

Notes on earlier replies: ’s jQuery approach works, but adding JS for a static style is overkill. ’s global #the_form label is fine when all labels share the same style.

Recommended Answers

All 6 Replies

Member Avatar for JorgeM

I dont have IE 7 handy to test, but have you tried using jQuery?

<!DOCTYPE html>
<html>
<head>
 <title>Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<form id="the_form">
    <input type="checkbox" value="ideal" name="ideal_drive" id="ideal">
       <label for="ideal">This is a test only only</label><br />
</form>  

<script>
  $('label[for="ideal"]').css('color', 'yellow');
</script>

</body>
</html>
Member Avatar for Violet_82

no I was hoping to keep it in the css to be honest, that's why I didn't use jquery : - )

Member Avatar for gavinflud

The problem is that :first-child is a pseudo-class that is not supported by anything less than IE8.

The first solution you gave is an attribute selector, which should be supported by IE7, you have to ensure you specify a doctype at the top your html file though.

If that doesn't work, your only pure CSS option would be to give the first label in the form it's own class or id, and define it's styles based on that selector.

Member Avatar for Baradaran

If you want to use the same color for all labels, simply use:

#the_form label{
color:yellow;
}

This makes the text of all labels yellow. If you want to use different colors or background colors, you have to use different classes.

Member Avatar for JorgeM

If you have no jQuery integration in the project, i wouldnt include the overhead just for this issue either.

Member Avatar for Violet_82

hi thanks all. gavinflud, can a label tag have an id? Sorry it didn't occur to me!

, no it's just one lable

@orgeM yes I include jquery in my project but I just wanted to use as much css as possible that's why I didn't want to use jquery to achieve this

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.