文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >单击单选按钮时更改背景

问单击单选按钮时更改背景
EN

Stack Overflow用户
提问于 2017-01-02 11:11:17
回答 5查看 3.2K关注 0票数 0

我有一个单选按钮，我给了它一些样式。

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

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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背景应该改变，而不是只改变跨度背景。

​

谢谢。

html
css
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-01-02 11:29:21

使用纯css，您不能从子元素中选择父元素

方法#01 (没有HTML修改)：

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

您需要添加以下CSS：

代码语言：javascript
复制
.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;
}

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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:

代码语言：javascript
复制
<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:

代码语言：javascript
复制
.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;
}

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2017-01-02 11:23:44

您可以为此使用JQuery：

代码语言：javascript
复制
$(document).ready(function() {   
   $('.no_of_speakers_radio_button input[type="radio"]').click(function() { 
   $(this).parent().parent().addClass("selected");
  });
});

CSS：

代码语言：javascript
复制
 .no_of_speakers_radio_button.selected {
   background: #ebeff1;
 }
票数 0
EN

Stack Overflow用户

发布于 2017-01-02 11:41:54

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

但是，您可以修改html结构和样式，以便在这里实现您想要的结果。我在这里修改了您的代码：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41425736

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档