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

Question

是否有可用的库可转换选项或radion输入具有带图标的可选按钮？以上是什么类型的样式示例。

Answer 1

我不确定stackoverflow是否可以提出这些问题，但这些对您有用：

 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/