3

Как я могу использовать изображение в опции пользовательского выбора вместо радио-кнопки? То есть, если пользователь щелкает по изображению, то оно должно вести себя как радио-кнопка.

C радио кнопками:

введите сюда описание изображения

Без радио кнопок:

введите сюда описание изображения

Подойдут реализации как при помощи jQuery, так и на чистом CSS.

Перевод вопроса: Use Image instead of radio button @Vignesh Pichamani

1

1 ответ 1

4
  • Оберните radio и image в <label>
  • Спрячьте radio кнопку
  • Разместите изображение рядом с hidden radio, используя селектор Adjacent sibling selector+

 <label>
      <input type="radio" name="fb" value="small" />
      <img src="fb1.jpg">
    </label>  

CSS:

label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}   

Не забудьте добавить класс к вашим labels, а в CSS используйте этот класс.

Пользовательские стили и анимации

Вот расширенная версия, использующая элемент <i> и :after pseudo:

введите сюда описание изображения

body{color:#444;font:100%/1.4 sans-serif;}


/* CUSTOM RADIO & CHECKBOXES
   https://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  visibility: hidden;
  position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{     /* DEFAULT <i> STYLE */
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: gray;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: orange;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: gray;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  orange;
}
<label class="rad">
  <input type="radio" name="r1" value="a" />
  <i></i> Radio 1
</label>
<label class="rad">
  <input type="radio" name="r1" value="b" />
  <i></i> Radio 2
</label>

<br>

<label class="ckb">
  <input type="checkbox" value="a" />
  <i></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" value="b" />
  <i></i> Checkbox 2
</label>  

jsBin demo 2

Перевод ответа: Use Image instead of radio button @Roko C. Buljan

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.