Как отобразить изображение в выбранном радио-ярлыке? - PullRequest
Новая
       1

Как отобразить изображение в выбранном радио-ярлыке?

1 голос
/ 29 марта 2019

Используя 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>

1 Ответ

2 голосов
/ 29 марта 2019

Используйте селектор псевдокласса :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 Ссылки:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...