html – 选择单选按钮时更改单选按钮标签的颜色？

概述参见英文答案 > Is there a CSS parent selector?                                    26个 当选择单选按钮时,有没有办法为单选按钮的颜色变化设置标签？ 我希望标签在悬停状态下与绿色相同,但我似乎无法弄清楚如何实现这一目标？ label.btn span { font-size: 16px;}i.fa { font-si 参见英文答案 > Is there a CSS parent selector?26个
当选择单选按钮时,有没有办法为单选按钮的颜色变化设置标签？

我希望标签在悬停状态下与绿色相同,但我似乎无法弄清楚如何实现这一目标？

label.btn span {  Font-size: 16px;}i.fa {  Font-size: 24px;}i.fa.fa-dot-circle-o {  Font-size: 24px;}label input[type="radio"] {  color: #c8c8c8;  display: inline;}label input[type="radio"] ~ i.fa.fa-dot-circle-o {  display: none;}label input[type="radio"]:checked ~ i.fa.fa-circle-o {  display: none;}label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {  color: #78a025;  display: inline;  Font-size: 24px;}label:hover input[type="radio"] ~ i.fa {  color: #78A025;}label input[type="checkBox"] ~ i.fa.fa-square-o {  color: #c8c8c8;  display: inline;}label input[type="checkBox"] ~ i.fa.fa-check-square-o {  display: none;}label input[type="checkBox"]:checked ~ i.fa.fa-square-o {  display: none;}label input[type="checkBox"]:checked ~ i.fa.fa-check-square-o {  color: #78A025;  display: inline;}label:hover input[type="checkBox"] ~ i.fa {  color: #78a025;}div[data-toggle="buttons"] label.active {  color: #78a025;}div[data-toggle="buttons"] label {  display: inline-block;  padding: 6px 12px;  margin-bottom: 0;  Font-size: 14px;  Font-weight: normal;  line-height: 2em;  text-align: left;  white-space: nowrap;  vertical-align: top;  cursor: pointer;  background-color: none;  border: 0px solID #c8c8c8;  border-radius: 3px;  color: #c8c8c8;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  -o-user-select: none;  user-select: none;}div[data-toggle="buttons"] label:hover {  color: #78A025;}div[data-toggle="buttons"] label:active,div[data-toggle="buttons"] label.active {  -webkit-Box-shadow: none;  Box-shadow: none;}

<link href="//netdna.bootstrapcdn.com/Font-awesome/4.0.3/CSS/Font-awesome.min.CSS" rel="stylesheet"><div >  <div >    <br>Vertical radio:    <br>    <div  data-toggle="buttons">      <label >        <input type="radio" name='gender1' checked><i ></i><i ></i>  <span>  Male</span>      </label>      <label >        <input type="radio" name='gender1'><i ></i><i ></i><span> Female</span>      </label>    </div>  </div></div><div >  <div >    <hr>Vertical checkBox:    <br>    <div  data-toggle="buttons">      <label >        <input type="checkBox" name='email1' checked><i ></i><i ></i>  <span> Marketing Email</span>      </label>      <label >        <input type="checkBox" name='email2'><i ></i><i ></i><span> Alert Email</span>      </label>      <label >        <input type="checkBox" name='email3'><i ></i><i ></i><span> Account Email</span>      </label>    </div>  </div></div>

这是一个用于演示目的的编码器cdpn.io/ENMMOz

解决方法 您无法设置标签的样式(因为我们在CSS中没有父选择器),但您可以为radiobutton或复选框设置文本样式 – 预期结果 – 使用：

label input[type="radio"]:checked ~ span {  color: #78a025;}label input[type="checkBox"]:checked ~ span {  color: #78a025;}

见下面的演示：

label.btn span {  Font-size: 16px;}i.fa {  Font-size: 24px;}i.fa.fa-dot-circle-o {  Font-size: 24px;}label input[type="radio"] {  color: #c8c8c8;  display: inline;}label input[type="radio"] ~ i.fa.fa-dot-circle-o {  display: none;}label input[type="radio"]:checked ~ i.fa.fa-circle-o {  display: none;}label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {  color: #78a025;  display: inline;  Font-size: 24px;}label:hover input[type="radio"] ~ i.fa {  color: #78A025;}label input[type="checkBox"] ~ i.fa.fa-square-o {  color: #c8c8c8;  display: inline;}label input[type="checkBox"] ~ i.fa.fa-check-square-o {  display: none;}label input[type="checkBox"]:checked ~ i.fa.fa-square-o {  display: none;}label input[type="checkBox"]:checked ~ i.fa.fa-check-square-o {  color: #78A025;  display: inline;}label:hover input[type="checkBox"] ~ i.fa {  color: #78a025;}div[data-toggle="buttons"] label.active {  color: #78a025;}div[data-toggle="buttons"] label {  display: inline-block;  padding: 6px 12px;  margin-bottom: 0;  Font-size: 14px;  Font-weight: normal;  line-height: 2em;  text-align: left;  white-space: nowrap;  vertical-align: top;  cursor: pointer;  background-color: none;  border: 0px solID #c8c8c8;  border-radius: 3px;  color: #c8c8c8;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  -o-user-select: none;  user-select: none;}div[data-toggle="buttons"] label:hover {  color: #78A025;}div[data-toggle="buttons"] label:active,div[data-toggle="buttons"] label.active {  -webkit-Box-shadow: none;  Box-shadow: none;}label input[type="radio"]:checked ~ span {  color: #78a025;}label input[type="checkBox"]:checked ~ span {  color: #78a025;}

<link href="//netdna.bootstrapcdn.com/Font-awesome/4.0.3/CSS/Font-awesome.min.CSS" rel="stylesheet"><div >  <div >    <br>Vertical radio:    <br>    <div  data-toggle="buttons">      <label >        <input type="radio" name='gender1' checked><i ></i><i ></i>  <span>  Male</span>      </label>      <label >        <input type="radio" name='gender1'><i ></i><i ></i><span> Female</span>      </label>    </div>  </div></div><div >  <div >    <hr>Vertical checkBox:    <br>    <div  data-toggle="buttons">      <label >        <input type="checkBox" name='email1' checked><i ></i><i ></i>  <span> Marketing Email</span>      </label>      <label >        <input type="checkBox" name='email2'><i ></i><i ></i><span> Alert Email</span>      </label>      <label >        <input type="checkBox" name='email3'><i ></i><i ></i><span> Account Email</span>      </label>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 选择单选按钮时更改单选按钮标签的颜色？全部内容，希望文章能够帮你解决html – 选择单选按钮时更改单选按钮标签的颜色？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。