Styling Eingang Radio mit CSS

Question

Ich habe diese Diashow mit [input type="radio"]: http://jsfiddle.net/Jtec5/23/
Codes: CSS:

#slideselector { 
    position: absolue; 
    top:0; 
    left:0; 
    border: 2px solid black; 
    padding-top: 1px; 
} 
.slidebutton { 
    height: 21px; 
    margin: 2px; 
} 

Ich versuche, den Eingang Radio mit CSS stylen, damit es so aussieht: irgendwelche Vorschläge?

Answer 1

Gefällt Ihnen dieses

DEMO

CSS

#slideselector { 
    position: absolue; 
    top:0; 
    left:0; 
    border: 2px solid black; 
    padding-top: 1px; 
} 
.slidebutton { 
    height: 21px; 
    margin: 2px; 
} 
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
    overflow:hidden; 
} 

.imgLike { 
    width:100%; 
    height:100%; 
} 
/* Radio */ 

input[type="radio"] { 
    background-color: #ddd; 
    background-image: -webkit-linear-gradient(0deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%), 
         -webkit-linear-gradient(90deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%); 
    border-radius: 10px; 
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.8), 
       0 0 0 1px hsla(0,0%,0%,.6), 
       0 2px 3px hsla(0,0%,0%,.6), 
       0 4px 3px hsla(0,0%,0%,.4), 
       0 6px 6px hsla(0,0%,0%,.2), 
       0 10px 6px hsla(0,0%,0%,.2); 
    cursor: pointer; 
    display: inline-block; 
    height: 15px; 
    margin-right: 15px; 
    position: relative; 
    width: 15px; 
    -webkit-appearance: none; 
} 
input[type="radio"]:after { 
    background-color: #444; 
    border-radius: 25px; 
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4), 
       0 1px 1px hsla(0,0%,100%,.8); 
    content: ''; 
    display: block; 
    height: 7px; 
    left: 4px; 
    position: relative; 
    top: 4px; 
    width: 7px; 
} 
input[type="radio"]:checked:after { 
    background-color: #f66; 
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4), 
       inset 0 2px 2px hsla(0,0%,100%,.4), 
       0 1px 1px hsla(0,0%,100%,.8), 
       0 0 2px 2px hsla(0,70%,70%,.4); 
} 

Answer 2

Hier ist ein einfaches Beispiel, wie Sie dies tun können.

Ersetzen Sie einfach die Bilddatei und Sie sind fertig.

HTML-Code

<input type="radio" id="r1" name="rr" /> 
<label for="r1"><span></span>Radio Button 1</label> 
<p> 
<input type="radio" id="r2" name="rr" /> 
<label for="r2"><span></span>Radio Button 2</label> 

CSS

input[type="radio"] { 
    display:none; 
} 

input[type="radio"] + label { 
    color:#f2f2f2; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(check_radio_sheet.png) -38px top no-repeat; 
    cursor:pointer; 
} 

input[type="radio"]:checked + label span { 
    background:url(check_radio_sheet.png) -57px top no-repeat; 
} 

Working DEMO

Answer 3

Sie sollten einige Hintergrundbild auf Ihrem Radio-Buttons verwenden und es mit einem anderen Bild auf Änderung Flip

.radio { 
    background: url(customButton.png) no-repeat; 
} 

Answer 4

Sehen Sie diese Fiddle

<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio" /><label for="radio-2-1"></label> 
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio" /><label for="radio-2-2"></label> 
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio" /><label for="radio-2-3"></label> 

.regular-radio { 
    display: none; 
} 

.regular-radio + label { 
    -webkit-appearance: none; 
    background-color: #e1e1e1; 
    border: 4px solid #e1e1e1; 
    border-radius: 10px; 
    width: 100%; 
    display: inline-block; 
    position: relative; 
    width: 10px; 
    height: 10px; 
} 

.regular-radio:checked + label { 
    background: grey; 
    border: 4px solid #e1e1e1; 
} 

Answer 5

Trident stellt das Pseudoelement ::-ms-check für Kontrollkästchen- und Optionsfeldsteuerelemente zur Verfügung. Zum Beispiel:

<input type="checkbox"> 
<input type="radio"> 

::-ms-check { 
    color: red; 
    background: black; 
    padding: 1em; 
} 

Hier wird wie in IE10 auf Windows 8 folgt: