Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

css selector

hey everyone. how can i give "agreement-box" and "news-box" a differnt color. im not allowed to chaneg the from tags. what shoud i put in style to give different color for each label
what selector to use?

HTML:
<form>
  <input id="agreement-box" type="checkbox">
  <label for="agreement-box">I agree</label>
  <input id="news-box" type="checkbox">
  <label for="news-box">I need more news</label>
</form>
 
Solution
Hey there.
You can select elements in CSS using their attributes: element[attribute="value"]

So for your elements you can do something like this:
CSS:
label[for="agreement-box"] {
  /* some css rules */
}

label[for="news-box"] {
  /* some css rules */
}
Hey there.
You can select elements in CSS using their attributes: element[attribute="value"]

So for your elements you can do something like this:
CSS:
label[for="agreement-box"] {
  /* some css rules */
}

label[for="news-box"] {
  /* some css rules */
}
 
Solution
Hey there.
You can select elements in CSS using their attributes: element[attribute="value"]

So for your elements you can do something like this:
CSS:
label[for="agreement-box"] {
  /* some css rules */
}

label[for="news-box"] {
  /* some css rules */
}
Thank you for the clarification. I was also facing the same issue in my code.
 
Within the form shown, you could also just use:

CSS:
label{
    /* your style here */
}

This would be a global style though and effect all labels.

You could also use a parent selector, such as:

CSS:
form label{
    /* your styles */
}

.myparentclass label{
    /* your styles */
}
 
Back
Top Bottom