Question

使用CSS，如何仅在选定的单选标签中显示图像，而在未选择时隐藏它？我的示例使用的是来自FA类的图像，但我也希望能够使用来自URL的图像。

我确定这已经得到回答，所以我可能正在寻找错误的东西。

.myButton{
  display:inline-block;
  width:100px;
  height:100px;
  border: 1px solid blue;
  border-radius:5px;
  margin-right: 10px;
}

.selected-image{
  float:right;
  margin-right: 5px;
}

.myButton i{
  float:right;
  margin-right: 5px;
}

.button-image{
  display:block;
  margin: 0 auto;
}

.myButton span{
  display: block;
  text-align:center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="main.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  </head>
  <body>

    <label class="myButton">
      <input type="radio"  name="contact" value="email">
      <i class="fas fa-check"></i>
      <!--<img class="selected-image" src="https://via.placeholder.com/16">-->
      <img class="button-image" src="https://via.placeholder.com/60">
      <span>Option 1</span>
    </label>

    <label class="myButton">
      <input type="radio"  name="contact" value="email">
      <i class="fas fa-check"></i>
      <!--<img class="selected-image" src="https://via.placeholder.com/16">-->
      <img class="button-image" src="https://via.placeholder.com/60">
      <span>Option 2</span>
    </label>

    <label class="myButton">
      <input type="radio"  name="contact" value="email">
      <i class="fas fa-check"></i>
      <!--<img class="selected-image" src="https://via.placeholder.com/16">-->
      <img class="button-image" src="https://via.placeholder.com/60">
      <span>Option 3</span>
    </label>
  </body>
</html>

Answer 1

将:checked伪类选择器与sibling选择器一起使用以显示图像。否则，它将被隐藏。

以下是使用具有不透明度的常规（~）兄弟选择器的示例：

.myButton{
  display:inline-block;
  width:100px;
  height:100px;
  border: 1px solid blue;
  border-radius:5px;
  margin-right: 10px;
}

.selected-image{
  float:right;
  margin-right: 5px;
}

.myButton i{
  float:right;
  margin-right: 5px;
}

.button-image{
  opacity: 0;
  display: block;
  margin: 0 auto;
}

.fas.fa-check {
  opacity: 0;
}

input:checked ~ .fas.fa-check {
  opacity: 1;
}

input:checked ~ .button-image {
  opacity: 1;
}

.myButton span{
  display: block;
  text-align:center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="main.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  </head>
  <body>

    <label class="myButton">
      <input type="radio"  name="contact" value="email">
      <i class="fas fa-check"></i>
      <!--<img class="selected-image" src="https://via.placeholder.com/16">-->
      <img class="button-image" src="https://via.placeholder.com/60">
      <span>Option 1</span>
    </label>

    <label class="myButton">
      <input type="radio"  name="contact" value="email">
      <i class="fas fa-check"></i>
      <!--<img class="selected-image" src="https://via.placeholder.com/16">-->
      <img class="button-image" src="https://via.placeholder.com/60">
      <span>Option 2</span>
    </label>

    <label class="myButton">
      <input type="radio"  name="contact" value="email">
      <i class="fas fa-check"></i>
      <!--<img class="selected-image" src="https://via.placeholder.com/16">-->
      <img class="button-image" src="https://via.placeholder.com/60">
      <span>Option 3</span>
    </label>
  </body>
</html>

MDN参考：

如何在选定的单选标签中显示图像？

1 个答案: