使用图像而不是单选按钮 [英] Use Image instead of radio button

问题描述

美好的一天。
如何在用户选择选项而不是单选按钮显示缩略图。例如，如果用户点击图像，它应该考虑作为单选按钮。
这是我正在寻找的图片。

使用单选按钮

无电子邮件按钮

下面的图片带有单选按钮，没有单选按钮。使用单选按钮已经实现。对于没有单选按钮只有iam要实现，仍然位混淆如果用户想要的第三个选项，然后他/她直接单击图像作为单选按钮选择。但我不知道我该怎么做在jquery或css。

感谢您，
vicky

解决方案

  body {color：＃444; font：100％/ 1.4 sans-serif;} / * CUSTOM RADIO& CHECKBOXES http://stackoverflow.com/a/17541916/383904 * /。rad，.ckb {cursor：pointer; user-select：none; -webkit-user-select：none; -webkit-touch-callout：none;}。rad>输入，.ckb>输入{/ * 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％;过渡：0.2s; box-shadow：inset 0 0 0 8px #fff; border：1px solid 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;背景：灰色;}。 input：checked + i {/ *（RADIO CHECKED）< i> STYLE * / box-shadow：inset 0 0 0 3px #fff;背景：橙色;} / * CHECKBOX * /。ckb> input + i：after {content：;显示：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 = > < input type =radioname =r1value =a/> < i>< / i> Radio 1< / label>< label class =rad> < input type =radioname =r1value =b/> < i>< / i> Radio 2< / label>< br>< label class =ckb> < input type =checkboxvalue =a/> < i>< / i>复选框1< / label>< label class =ckb> < input type =checkboxvalue =b/> < i>< / i>复选框2< / label>  

a href =http://jsbin.com/pafifi/3/edit?html,css,output =nofollow noreferrer> jsBin demo 2

Good Day. How can i show the thumbnail images in the user select option instead of radio button. For example if the user click the image it should consider as radio button. Here is the Images that is what i was looking for.

With Radio Button

Without Radio Button

The following image with radio button and without radio button. With Radio Button is already implemented. For without radio button only iam going to implement, Still I Bit Confuse with If the user want that third option then he/she directly click the image alone to make as radio button selection. But I am Not sure how can i do this in jquery or css. Any help or Suggestion would be much appreciated.

Thanks, vicky

解决方案

http://jsbin.com/image-instead-of-radio-button/5/

• Wrap radio and image in <label>
• Hide radio button
• Target the image next to the hidden radio using 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;
}

_{Don't forget to add a class to your labels and in CSS use that class instead.}

---

Custom styles and animations

Here's an advanced version using the <i> element and the :after pseudo:

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


/* CUSTOM RADIO & CHECKBOXES
   http://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

这篇关于使用图像而不是单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！