css - 更改单选按钮的颜色(默认并选中)

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>

代码笔链接:https://codepen.io/vicm/pen/QBPQWZ

Answer 1

这是一个片段，我在其中:

• 添加了结束语 </div>在您的 HTML 中，
• 重组您的 CSS 代码并尝试删除重复的样式属性，
• 更正了一些拼写错误(display: inline-blok 到 display: inline-block，position:relavitve; 到 position: relative; …)，
• 我添加了一些样式和注释来明确不同的可能状态，
• 而不是使用 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>

如果你想修改一些东西，现在应该更容易了。