Input options (radio and checkbox) has buttons with icons

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.

http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button — Luv33preet, Mar 01 '17 at 15:33

score 0 · Answer 1 · edited May 23 '17 at 12:09

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>

score 0 · Answer 2 · answered Mar 01 '17 at 15:45

0

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
}

answered Mar 01 '17 at 15:45

Marco Salerno

5,131
2
12
32

score 0 · Answer 3 · answered Mar 01 '17 at 15:46

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/

Input options (radio and checkbox) has buttons with icons

3 Answers3