Question

我有一个问题：

我希望默认模式下的单选按钮具有css：

border-color: #00AD51;
color: #fff;
background-color: #00AD51;

，并且当用户选择/单击另一个单选按钮时，它将更改为此CSS：

border-color: #00AD51;
color: #00AD51;
background-color: #fff;

这可能吗？如何在单选按钮的默认模式和选中模式下创建特定的CSS？

HTML：

<p><b>What is your favorite animal?</b></p><br />

<div class="Animals"><div class="input">
    <input id="dog" type="radio" name="Animal" checked>
        <label for="dog"><span>Dog</span></label>
</div>

<div class="Animals"><div class="input">
    <input id="cat" type="radio" name="Animal">
        <label for="cat"><span>Cat</span></label>
</div>

<div class="Animals"><div class="input">
    <input id="Horse" type="radio" name="Animal">
        <label for="Horse"><span>Horse</span></label>
</div>

<div class="Animals"><div class="input">
    <input id="Cow" type="radio" name="Animal">
        <label for="Cow"><span>Cow</span></label>
</div>

链接到codepen：https://codepen.io/vicm/pen/QBPQWZ

Answer 1

您可以使用此简单技巧。用户何时可以单击或选中单选按钮

.Animals input[type=radio]:checked + label{border-color: #00AD51;color: #00AD51;background-color: #fff;}

希望获得帮助。

让我知道进一步的澄清。

  input[type=radio]
{
    margin-right: 3px;
    position: relative;
    top: 3px;
}



.Animals
{
    border:2px solid #003D6A;
    margin:10px;
    height:100px;
    padding:10px;
    border-radius:3px;
    text-align:center;
    font-size: 20px;
    line-height: 20px;
    background-color:#fff;
  font-family: Helvetica;
  display: inline-blok;


}
.Animals{
  margin: 0 auto;
}

.Animals input[type=radio] {
    opacity: 0;
    position:relavitve;
}


.Animals input[type=radio] + label {
    cursor: pointer;
    text-shadow: 1px 1px 0 rgba(0,0,0,0);
    border: 2px solid #003D6A;
    margin: 10px;
    height: 100px;
    border-radius: 3px;
    text-align: center;
    font-size: 20px;
    font-family: Helvetica;
    width: 292px;
    background-color: #ffffff;
}


.Animals input[type=radio] + label:hover{
    border-color: #00AD51;
    background-color: #fff;
    color: #00AD51;
}


.Animals .input
{
    padding-bottom:0;
}
.Animals label span
{
    position:relative;
    top:33%;
}

.Animals input[type=radio]:checked + label{
      border-color: #00AD51;
    color: #00AD51;
    background-color: #fff;
}

<p><b>What is your favorite animal?</b></p><br />

<div class="Animals"><div class="input">
  <input id="dog" type="radio" name="Animal" checked>
  <label for="dog"><span>Dog</span></label>
</div>

<div class="Animals"><div class="input">
  <input id="cat" type="radio" name="Animal">
  <label for="cat"><span>Cat</span></label>
</div>
   
<div class="Animals"><div class="input">
  <input id="Horse" type="radio" name="Animal">
  <label for="Horse"><span>Horse</span></label>
</div>
  
<div class="Animals"><div class="input">
  <input id="Cow" type="radio" name="Animal">
  <label for="Cow"><span>Cow</span></label>
</div>

Answer 2

以下是我的代码段：

在您的HTML中添加了结尾</div>
重新组织了CSS代码，并尝试删除重复的样式属性，
更正了一些拼写错误（从display: inline-blok到display: inline-block，从position:relavitve;到position: relative;…），
我添加了一些样式以及注释，以使您清楚了解不同的可能状态，
您可以使用另一个自定义属性（例如“ recommand”），而不是在“ recommanded”答案上使用checked，并在CSS中使用它正确设置样式。

input[type=radio] {
  margin-right: 3px;
  position: relative;
  top: 3px;
}

.Animals {
  display: inline-block;
  height: 100px;
  margin: 10px;
  border: 2px solid #003D6A;
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  text-align: center;
  line-height: 20px;
  font-family: Helvetica;
  font-size: 20px;
}

.Animals .input {
  padding-bottom: 0;
}

.Animals input[type=radio] {
  opacity: 0;
}

.Animals input[type=radio]+label {
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  border: 2px solid;
  margin: 10px;
  height: 100px;
  border-radius: 3px;
  text-align: center;
  font-size: 20px;
  font-family: Helvetica;
  width: 292px;
/* Default */
  border-color: darkblue;
  background-color: #fff;
  color: darkblue;
}

/* Recommanded */
.Animals input[type=radio][recommand]+label {
  border-color: turquoise;
  color: turquoise;
}

/* Hover */
.Animals input[type=radio]+label:hover {
  border-color: #00AD51;
  color: #00AD51;
}

/* Checked */
.Animals input[type=radio]:checked+label {
  border-color: #00AD51;
  background-color: #00AD51;
  color: #fff;
}

.Animals label span {
  position: relative;
  top: 33%;
}

<p><b>What is your favorite animal?</b></p><br />

<div class="Animals">
  <div class="input">
    <input id="dog" type="radio" name="Animal" recommand>
    <label for="dog"><span>Dog</span></label>
  </div>
</div>

<div class="Animals">
  <div class="input">
    <input id="cat" type="radio" name="Animal">
    <label for="cat"><span>Cat</span></label>
  </div>
</div>

<div class="Animals">
  <div class="input">
    <input id="Horse" type="radio" name="Animal">
    <label for="Horse"><span>Horse</span></label>
  </div>
</div>

<div class="Animals">
  <div class="input">
    <input id="Cow" type="radio" name="Animal">
    <label for="Cow"><span>Cow</span></label>
  </div>
</div>

如果您要修改某些内容，现在应该会更容易。

希望有帮助。

更改单选按钮的颜色（默认和选中）

2 个答案: