Input options (radio and checkbox) has buttons with icons - html

Question

Is there any library available that converts options or radion inputs has selectble buttons with icons? Example of what type of styling looking for is above.

Answer 1

I'm not sure stackoverflow is the right place to ask these kinda questions, but these are useful for you:
1. <http://codepen.io/DavidBradbury/pen/HuCqx>
2. https://gist.github.com/rcotrina94/7828886
3. Use Image instead of radio button
And you possibly duplicating the last one.
This snippet from codepen, here to stay:
.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

You don't need a library to do it.
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

You can make this yourself, this easy, do changes background-images
<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;
}
Live demo JsFiddle - https://jsfiddle.net/grinmax_/7fpbkz9s/