HTML CSS: Switch/Change background color of div, color of label text on radio button selection

Question

I have input and label inside a div. There are two divs div1 and div2. I want to change background color of div and color of label text when selecting corresponding radio button.

Div color want to change from red to blue

label text color black to yellow

I have written below HTML and CSS for this:

HTML:

<div class="main_div">
    <div class="div1">
        <input type="radio" name="group1" value="1" id="yes" /><label for="yes">Yes, It is</label>
    </div>
    <div class="spaceDiv"></div>
    <div class="div2">
        <input type="radio" name="group1" value="2" id="no" /><label for="no">Not at all</label>
    </div>
</div>

CSS:

.div1, .div2 {
    background: red;
    display: block;
    height: 3em;

}

.div1, .div2 input {
    padding: 1em;
}

.div2, .div1 input {
    padding: 1em;
}

.div1 label {
    padding: .9em;
}

.div2 label {
    padding: .9em;
}


.spaceDiv {
    background: #fff;
    height: 0.5em;
}

It is not possible by pure css. You have to use javascript or jquey. — Alex, Nov 29 '15 at 03:31
Alternate duplicate: http://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit — cimmanon, Nov 29 '15 at 04:13
@VicJordan How do you figure it's not a duplicate? You're asking how to style the div element, which is an ancestor/parent of the input element. — cimmanon, Nov 29 '15 at 16:13

Rick Hitchcock · Accepted Answer · 2015-11-29T10:51:52.673

3

Here's a solution, which uses the :after pseudo-element on the label so it covers the entire div. The background has been moved from the div to this pseudo-element. When the input is checked, the general sibling selector (~) is used to change the background color of the pseudo-element as well as the text color of the label.

how I can vertical align input and label inside the div? I have used padding stuff which is not correct

Since there's only one line of text, setting line-height equal to height will cause vertical alignment. You can then remove the padding:

.div1,
.div2 {
  height: 3em;
  line-height: 3em;
}

Snippet:

.div1,
.div2 {
  display: block;
  height: 3em;
  line-height: 3em;
  position: relative;
}

.spaceDiv {
  background: #fff;
  height: 0.5em;
}

label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
  z-index: -1;
}

input:checked ~ label:after {
  background: blue;
}

input:checked ~ label {
  color: yellow;
}

<div class="main_div">
  <div class="div1">
    <input type="radio" name="group1" value="1" id="yes" />
    <label for="yes">Yes, It is</label>
  </div>
  <div class="spaceDiv"></div>
  <div class="div2">
    <input type="radio" name="group1" value="2" id="no" />
    <label for="no">Not at all</label>
  </div>
</div>

edited Nov 29 '15 at 10:51

answered Nov 29 '15 at 03:39

Rick Hitchcock

33,093
3
40
70

This is what i wanted. One more small question, how I can vertical align input and label inside the div? I have used padding stuff which is not correct :( – Vikasdeep Singh Nov 29 '15 at 03:55
@VicJordan If it answered your question, please click the check mark next to the answer to signify that. It will give both you and the answerer some reputation – Zach Saucier Nov 29 '15 at 04:34
@ZachSaucier, thank you for your comment. I have upvoted the question as this is partial solution and also this is working standalone as it is but in my main code is it not working. I am waiting for the @Rick`s response. I will accept answer once it will be resolved – Vikasdeep Singh Nov 29 '15 at 04:37
@VicJordan It seems to me that he answered the question you have asked. If you're asking a separate question, feel free to ask it separately – Zach Saucier Nov 29 '15 at 04:38
@ZachSaucier, understand. Thanks. But why people downvoted my question? :( – Vikasdeep Singh Nov 29 '15 at 04:40
1

See my update regarding your vertical alignment question. – Rick Hitchcock Nov 29 '15 at 10:52

score 1 · Answer 2 · answered Nov 29 '15 at 03:39

1

http://jsfiddle.net/mwbbcyja/58/

input:checked + label {
    background-color:red;
}

answered Nov 29 '15 at 03:39

Lil Devil

568
3
10

HTML CSS: Switch/Change background color of div, color of label text on radio button selection

2 Answers2