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

问题描述

如果我有一个带按钮的收音机组：

...如何在选择选项中显示图像而不是按钮，例如

解决方案

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

• 换行 radio < label>


• 中的 和 隐藏收音机按钮


• 使用相邻兄弟选择器 +

 < label> 
< input type =radioname =fbvalue =small/> 
< img src =fb1.jpg> 
< / label> 
  

CSS：

 标签>输入{/ * HIDE RADIO * / 
 visibility：hidden; / *使输入不可点击* / 
位置：绝对; / *从文档流中移除输入* / 
} 
标签> input + img {/ *图片样式* / 
光标：指针; 
 border：2px实体透明; 
} 
标签>输入：checked + img {/ *（RADIO CHECKED）IMAGE STYLES * / 
 border：2px solid＃f00; 
} 
  

_{不要忘记添加一个 class} 而不是使用 class 。

---

自定义样式和动画

以下是使用< i> 元素和元素的高级版本>：在伪之后：

< img src =https://i.stack.imgur.com/GBhUc.pngalt =CSS自定义广播和复选框>

  body {color：＃444; font：100％/ 1.4 sans-serif;} / * CUSTOM RADIO& CHECKKOXES http://stackoverflow.com/a/17541916/383904 * /。rad，.ckb {cursor：pointer;用户选择：无; -webkit-user-select：none; -webkit-touch-callout：none;}。rad>输入，.ckb>输入{/ * HIDE ORG RADIO& CHECKBOX * / visibility：hidden; position：absolute;} / * RADIO& CHECKBOX STYLES * /。rad>我，.ckb>我{/ * DEFAULT< i> STYLE * / display：inline-block; vertical-align：middle;宽度：16px; height：16px;边界半径：50％;过渡：0.2s; box-shadow：inset 0 0 0 8px #fff;边框：1px纯灰色;背景：灰色;} / * CHECKBOX OVERWRITE STYLES * / .ckb>我{宽度：25px; border-radius：3px;}。rad：hover>我{/ * HOVER< i> STYLE * / box-shadow：插入0 0 0 3px #fff;背景：灰色;}。rad>输入：checked + i {/ *（RADIO CHECKED）< i> STYLE * / box-shadow：插入0 0 0 3px #fff;背景：orange;} / * CHECKBOX * / .ckb> input + i：after {content：;显示：块;身高：12px;宽度：12px; margin：2px; border-radius：inherit;过渡：继承;背景：灰色;}。ckb>输入：checked + i：在{/ *（RADIO CHECKED）之后< i> STYLE * / margin-left：11px;背景：orange;}  

 < label class =rad > < 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> jsBin demo 2

If I have a radio group with buttons:

... how can I show only images in the select option instead of the buttons, e.g.

解决方案

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屋！