单击单选按钮时更改背景答案

【问题标题】：change background when radio button clicked单击单选按钮时更改背景
【发布时间】：2017-01-02 11:11:17
【问题描述】：

我有一个单选按钮，我已经给出了一些样式。

当我点击它时，div 背景颜色应该会改变。

.no_of_speakers_radio_button {
	margin: 0 auto;
	display: flex;
	padding: 35px 0px;
	text-align: center;
	flex-direction: column;
	border:thin red solid;
	width:100px;
}

.no_of_speakers_radio_button label {
	overflow: hidden;
}

.no_of_speakers_radio_button label span {
	text-align: center;
	font-size: 15px;
	margin: auto;
	display: block;
}

.no_of_speakers_radio_button input {
	position: absolute;
}

.no_of_speakers_radio_button input:checked + span {
	background-color: #ebeff1;
	text-align: center;
}

.no_of_speakers_radio_button input:not(:checked + span) {
	background: transparent;
}

.no_of_speakers_radio_button:hover{
	background: #ebeff1;
}

<div class="no_of_speakers_radio_button">
    <label class="four_speakers">
        <input type="radio" name="choose_speaker" class="click">
        <span class="font_size_20">4</span>
        <span class="font_size_17">Speakers</span>
    </label>
</div>

<div class="no_of_speakers_radio_button">
    <label class="eight_speakers">
        <input type="radio" name="choose_speaker" class="click">
        <span class="font_size_20">8</span>
        <span class="font_size_17">Speakers</span>
    </label>
</div>

我想要的是，当单击单选按钮时，整个 div 背景应该改变，而不是只改变 span 背景。

谢谢。

【问题讨论】：

添加一个父容器并让 CSS 影响它的子容器？
没找到你...

标签： html css

【解决方案1】：

使用纯 CSS，您无法从子元素中选择父元素元素

方法 #01（没有 HTML 修改）：

在不修改当前HTML 结构的情况下，您可以使用:before 或:after 伪元素来创建一个虚假的活动状态。

您需要添加以下 CSS：

.no_of_speakers_radio_button {
  position: relative;
}
.no_of_speakers_radio_button input:checked + span:before {
  background-color: #ebeff1;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.no_of_speakers_radio_button {
  margin: 0 auto;
  display: flex;
  padding: 35px 0px;
  text-align: center;
  flex-direction: column;
  border:thin red solid;
  position: relative;
  width:100px;
}

.no_of_speakers_radio_button label {
  overflow: hidden;
}

.no_of_speakers_radio_button label span {
  text-align: center;
  font-size: 15px;
  margin: auto;
  display: block;
}

.no_of_speakers_radio_button input {
  position: absolute;
}

.no_of_speakers_radio_button input:checked + span {
  background-color: #ebeff1;
  text-align: center;
}

.no_of_speakers_radio_button input:checked + span:before {
  background-color: #ebeff1;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.no_of_speakers_radio_button input:not(:checked + span) {
  background: transparent;
}

.no_of_speakers_radio_button:hover{
  background: #ebeff1;
}

<div class="no_of_speakers_radio_button">
  <label class="four_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">4</span>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <label class="eight_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">8</span>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

替代方法（带有 HTML 修改）：

您可以将您的HTML 修改为以下代码。诀窍是将原始的input 放置在视图之外，并在适当的位置放置一个假的input[type="radio"] 按钮。

HTML：

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio1" name="choose_speaker" class="click">
  <label class="four_speakers" for="radio1">
    <div>
      <span class="font_size_20">4</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

CSS：

.no_of_speakers_radio_button input {
  position: absolute;
  opacity: 0;
  left: -9999px;
  top: -9999px;
}
.no_of_speakers_radio_button label .fake-radio {
  position: relative;
  border: 1px solid black;
  border-radius: 100%;
  height: 12px;
  width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
  background-color: #222;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
  z-index: 10;
  content: '';
  bottom: 2px;
  right: 2px;
  left: 2px;
  top: 2px;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
  opacity: 1;
}

.no_of_speakers_radio_button {
  margin: 0 auto;
  border:thin red solid;
  position: relative;
  overflow: hidden;
  width:100px;
}

.no_of_speakers_radio_button label {
  padding: 35px 0px;
  text-align: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  display: flex;
  height: 100%;
}

.no_of_speakers_radio_button div span {
  text-align: center;
  font-size: 15px;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
}

.no_of_speakers_radio_button input {
  position: absolute;
  opacity: 0;
  left: -9999px;
  top: -9999px;
}

.no_of_speakers_radio_button label .fake-radio {
  position: relative;
  border: 1px solid black;
  border-radius: 100%;
  height: 12px;
  width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
  background-color: #222;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
  z-index: 10;
  content: '';
  bottom: 2px;
  right: 2px;
  left: 2px;
  top: 2px;
}
.no_of_speakers_radio_button input:checked + label {
  background-color: #ebeff1;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
  opacity: 1;
}
.no_of_speakers_radio_button input:not(:checked + span) {
  background: transparent;
}
.no_of_speakers_radio_button label:hover {
  background: #ebeff1;
}

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio1" name="choose_speaker" class="click">
  <label class="four_speakers" for="radio1">
    <div>
      <span class="font_size_20">4</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio2" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio2">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio3" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio3">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio4" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio4">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

<div class="no_of_speakers_radio_button">
  <input type="radio" id="radio5" name="choose_speaker" class="click">
  <label class="eight_speakers" for="radio5">
    <div>
      <span class="font_size_20">8</span>
      <span class="fake-radio"></span>
    </div>
    <span class="font_size_17">Speakers</span>
  </label>
</div>

【讨论】：

谢谢.. 但我不能让整个 div 成为单选按钮。因为用户可能不会点击广播文本。他可以点击整个div中的任意位置。
@Rishi 是的，这是可能的，但 input 框在框内的位置可能很难或很难准确定位在这个位置。
@Rishi 我已经更新了我的答案。我希望它能解决你所有的问题。
在你的第二种方法中，当我点击它然后页面导航到它的顶部。
@Rishi 嗯，让我试着弄清楚为什么会这样。

【解决方案2】：

您可以为此使用 JQuery：

$(document).ready(function() {   
   $('.no_of_speakers_radio_button input[type="radio"]').click(function() { 
   $(this).parent().parent().addClass("selected");
  });
});

CSS：

 .no_of_speakers_radio_button.selected {
   background: #ebeff1;
 }

【讨论】：

不工作。我不能将整个 div 设置为单选按钮，然后单击它，背景就会改变。

【解决方案3】：

使用 css 没有点击触发器。但是，您可以使用 javascript 的点击功能来切换背景颜色

var radio1 = document.getElementsByClassName("click")[0];
var radio2 = document.getElementsByClassName("click")[1];
	radio1.addEventListener("click",function(){
		radio1.parentNode.parentNode.style.backgroundColor="red";
		radio2.parentNode.parentNode.style.backgroundColor="white";
	})
radio2.addEventListener("click",function(){
		radio2.parentNode.parentNode.style.backgroundColor="red";
		radio1.parentNode.parentNode.style.backgroundColor="white";
	})

.no_of_speakers_radio_button {
			margin: 0 auto;
			display: flex;
			padding: 35px 0px;
			text-align: center;
			flex-direction: column;
			border:thin red solid;
			width:100px;
		}

		.no_of_speakers_radio_button label {
			overflow: hidden;
		}

		.no_of_speakers_radio_button label span {
			text-align: center;
			font-size: 15px;
			margin: auto;
			display: block;
		}

		.no_of_speakers_radio_button input {
			position: absolute;
		}

		.no_of_speakers_radio_button input:checked + span {
			text-align: center;
		}

		.no_of_speakers_radio_button input:not(:checked + span) {
			background: transparent;
		}

		.no_of_speakers_radio_button:hover{
			background: #ebeff1;
		}

<div class="no_of_speakers_radio_button" class="four_speakers">
	<label >
		<input type="radio" name="choose_speaker" class="click" >
		<span class="font_size_20">4</span>
		<span class="font_size_17">Speakers</span>
	</label>
</div>

<div class="no_of_speakers_radio_button">
	<label class="eight_speakers">
		<input type="radio" name="choose_speaker" class="click">
		<span class="font_size_20">8</span>
		<span class="font_size_17">Speakers</span>
	</label>
</div>

【讨论】：

想在不使用 javascript 或 jquery 的情况下做到这一点。

【解决方案4】：

您不能在 css 中遍历父级，即没有父级选择器。

但是，您可以修改您的 html 结构并设置样式，以便在此处实现您想要的。我在这里稍微修改了你的代码：

.no_of_speakers_radio_button {
  margin: 0 auto;
  display: flex;
  height: 100px;
  padding: 0;
  text-align: center;
  flex-direction: column;
  border: thin red solid;
  width: 100px;
}
.no_of_speakers_radio_button label {
  overflow: hidden;
  height: 100%;
  display: block;
}
.no_of_speakers_radio_button label span {
  text-align: center;
  font-size: 15px;
  margin: auto;
  display: block;
}
.no_of_speakers_radio_button input {
  position: absolute;
  margin-top: 40px;
}
.no_of_speakers_radio_button input:checked + span {
  background-color: #ebeff1;
  text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
  background: transparent;
}
.no_of_speakers_radio_button:hover {
  background: #ebeff1;
}
.font_size_20 {
  height: 60px;
  padding-top: 40px;
}

<div class="no_of_speakers_radio_button">
  <label class="four_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">4 <span>Speakers</span> </span>
  </label>
</div>
<div class="no_of_speakers_radio_button">
  <label class="eight_speakers">
    <input type="radio" name="choose_speaker" class="click">
    <span class="font_size_20">8 <span>Speakers</span></span>
  </label>
</div>

【讨论】：

我可能有多个跨度文本。喜欢。 4 和 演讲者
@Rishi 您可以将跨度嵌套在主跨度内。更新了我的答案。
谢谢你.. 但它仍然和我想要的不一样。
那我不知道你想要什么。您应该在说明中提及您的确切要求。
抱歉不清楚。如图所示。我希望一个单选按钮看起来像一个 div，当我将鼠标悬停或单击它时，它的背景颜色应该会改变。

【解决方案5】：

给一个单选按钮一个类名，然后在该类中放置更改背景

【讨论】：