HTML CSS：切换/更改div的背景颜色，单选按钮选择时标签文本的颜色

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;
}

Answer 1

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> 

Answer 2

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

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