输入选项（收音机和复选框）有图标按钮

Question

是否有任何库可用于转换选项或无线电输入具有图标的可选按钮？以上是寻找什么类型的样式的例子。

Answer 1

我不知道计算器是要问这些问题还挺正确的地方，但这些都是对您有用：

1. <http://codepen.io/DavidBradbury/pen/HuCqx> 

2. https://gist.github.com/rcotrina94/7828886 3. Use Image instead of radio button

你可能复制最后一个。

该片段从codepen，在这里留下来：

.input-hidden { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
input[type=radio]:checked + label>img { 
 
    border: 1px solid #fff; 
 
    box-shadow: 0 0 3px 3px #090; 
 
} 
 

 
/* Stuff after this is only to make things more pretty */ 
 
input[type=radio] + label>img { 
 
    border: 1px dashed #444; 
 
    width: 150px; 
 
    height: 150px; 
 
    transition: 500ms all; 
 
} 
 

 
input[type=radio]:checked + label>img { 
 
    transform: 
 
    rotateZ(-10deg) 
 
    rotateX(10deg); 
 
} 
 

 
/* 
 
| //lea.verou.me/css3patterns 
 
| Because white bgs are boring. 
 
*/ 
 
html { 
 
    background-color: #fff; 
 
    background-size: 100% 1.2em; 
 
    background-image: 
 
    linear-gradient(
 
     90deg, 
 
     transparent 79px, 
 
     #abced4 79px, 
 
     #abced4 81px, 
 
     transparent 81px 
 
    ), 
 
    linear-gradient(
 
     #eee .1em, 
 
     transparent .1em 
 
    ); 
 
}

<input 
 
    type="radio" name="emotion" 
 
    id="sad" class="input-hidden" /> 
 
<label for="sad"> 
 
    <img 
 
    src="//placekitten.com/150/150" 
 
    alt="I'm sad" /> 
 
</label> 
 

 
<input 
 
    type="radio" name="emotion" 
 
    id="happy" class="input-hidden" /> 
 
<label for="happy"> 
 
    <img 
 
    src="//placekitten.com/151/151" 
 
    alt="I'm happy" /> 
 
</label>

Answer 2

你并不需要一个库做。

HTML：

<input type="radio" id="example"/> 
<label for="example"><i>youricon</i>Text</label> 

CSS：

input[type="radio"] { 
    display: none; 
} 

label { 
    //......button layout 
} 

Answer 3

你可以让这个自己，这很容易，做变化的背景图像

<label class="check"> 
    <input type="checkbox"> 
    <span>Value</span> 
</label> 

CSS

.check { 
    position: relative; 
    padding-left: 40px; 
} 

.check input { 
    opacity: 0; 
    transform: scale(0); 
} 

.check span:before { 
    content: ''; 
    display: block; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background:#000; 
} 

.check input:checked + span:before { 
    background: red; 
} 

现场演示的jsfiddle - https://jsfiddle.net/grinmax_/7fpbkz9s/