Eingabeoptionen (Radio und Kontrollkästchen) hat Schaltflächen mit Symbolen

Question

Gibt es eine Bibliothek, die Optionen oder Radion-Eingänge konvertiert hat auswählbare Schaltflächen mit Symbolen? Beispiel für welche Art von Styling suchen ist oben.

Answer 1

Ich bin nicht sicher, Stackoverflow der richtige Ort ist, diese irgendwie Fragen zu stellen, aber diese sind nützlich für Sie:

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

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

Und Sie möglicherweise den letzten duplizieren.

Dieser Ausschnitt aus codepen, hier zu bleiben:

.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

Sie brauchen nicht eine Bibliothek, es zu tun.

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

Sie können dies selbst machen, so einfach, tun Änderungen Hintergrund-Bilder

<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/