css3 radio bouton

css3 radio bouton degradé

by polinux

HTML

<input name="rad" id="radio_r1" value="r1" type="radio"><label for="radio_r1" >réponse 1</label> <br> <input name="rad" id="radio_r2" value="r2" type="radio"><label for="radio_r2" >réponse 2</label> <br> <input name="rad" id="radio_r3" value="r3" type="radio"><label for="radio_r3" >réponse 3</label> <br>

CSS

label {     font-family: Comic Sans MS;     font-size: 2em; }  input[type="radio"] {     opacity: 0;     position: absolute;     width: 1px;     height: 1px; } input[type=radio] + label:before {     font-size: 16px;     padding:0 11px;     content:"";     border:2px solid #a1a1a1;     border-radius:16px;     margin-right:4px;     background:#eeffff;     background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#cbcefb), to(#ffffff));     background-image: -moz-linear-gradient(top center, #cbcefb, #ffffff);     background-image: -o-linear-gradient(top, #cbcefb, #ffffff); }  input[type=radio]:checked + label:before {     background-color: black;     background-image: -webkit-gradient(linear, left top, left bottom, from(#cbcefb), to(#000000));     background-image: -moz-linear-gradient(top center, #cbcefb, #000000);     background-image: -o-linear-gradient(top, #cbcefb, #000000); }