Question

我在div中输入和标签。有两个div div1和div2。我想在选择相应的单选按钮时更改div的背景颜色和标签文本的颜色。

Div颜色想要从红色更改为蓝色

将文字颜色黑色标记为黄色

我为此写了以下HTML和CSS：

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

这是一个解决方案，它使用:after上的label伪元素，因此它涵盖整个div。背景已从div移动到此伪元素。选中input后，general sibling selector（〜）用于更改伪元素的背景颜色以及label的文本颜色。

如何在div中垂直对齐输入和标签？我使用了不正确的填充内容

由于只有一行文字，因此设置line-height等于height会导致垂直对齐。然后，您可以删除填充：

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

<强>段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

HTML CSS：在单选按钮选择

2 个答案: