So passen Sie den radio-button in html
Ich versuche radio-button wie diese..
Aber ich bin immer wie diese
Wenn Keine option ausgewählt ist, muß ich passen Sie die radio-Taste und es sollte zeigen, weiße Farbe drin. Wenn radio-button ausgewählt ist, sollte es zeigen grüne Farbe im inneren der box. Wie dies zu erreichen?
Hier, was ich versucht habe.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie einfach die
:before
pseudo-element kümmern sich um die Farbe vor derradio
- Taste aktiviert ist. Fügen Sie diese zu IhremCSS
:Arbeiten demo. Sie können natürlich ändern, die
background
dieses label entspricht genau dem Beispiel, das Sie zeigen. Hoffe, es hilft.schauen Sie sich dieses fiddle.
Sollten Sie formatieren Sie Ihre radio-button beide deaktivieren und überprüft.
Finden Sie Ihre anwser Folgen block-code:
Ergebnis:
Erzielen Sie gewünschte layout in zwei Arten
Über das entfernen von standard-Aussehen mit CSS
appearance
und zuweisen von benutzerdefinierten Aussehen. Leider war dies nicht funktioniert im IE für Desktop (funktioniert aber im IE für Windows Phone). Demo:CSS:
HTML:
Per radiobutton versteckt und das festlegen von benutzerdefinierten radiobutton Aussehen
label
's pseudoselector. Übrigens keine Notwendigkeit für eine absolute Positionierung hier. Demo:CSS:
HTML: