CODEWITHSUNDEEP
htmlcssformslabelfont-awesome
osbt
osbt

Reputation: 131

Changing HTML form CSS properties for labels

What I did:

I created a HTML quiz by using a form, font awesome and labels. I am using the icon-circle and icon-circle-blank classes from font awesome to substitute as radio buttons for a more customized look. I have so when you select an option, the css will change the color of the font awesome class to orange.

What I am trying to do:

I'm trying to make a css property that will change the label's text property to same color as the selected font awesome class.

CSS:

[type=radio] {
    display: none;
}
[type=radio] + label:before {
    content: "\f10c";
    color: #183e63;
    margin-right: 10px;
}
[type=radio]:checked + label:before {
    content: "\f111";
    color: #fcbc02;
    margin-right: 10px;
}
h3 {
    color: #5f93c5;
}
label {
    color: #183e63;
    font-weight: bold;
}

Complete code (http://jsfiddle.net/fTdRS/15/)

Thank you!

Edit: Sorry for the "simple question" but i'm just learning CSS and it was the first time I was working with the [type] properties.

Upvotes: 0

Views: 1674

Answers (1)

Adrift
Adrift

Reputation: 59799

Add:

[type=radio]:checked + label {
    color: #fcbc02;
}

http://jsfiddle.net/fTdRS/17/

Upvotes: 5

Related Questions