Ausführliche Erläuterung des Radiobeispiels für CSS3-Verschönerungs-Radiobuttons

Diese reine CSS3-Methode zur Verschönerung des Optionsfelds eignet sich für die folgenden Situationen:

1. Sie ist mit IE9 und höher kompatibel. Wenn Sie mit IE8 kompatibel sein müssen, müssen Sie eine schreiben IE-Hack zum Entfernen des Stils

2. Es wird nur das Optionsfeld-Radio unterstützt, da der Kreis im Optionsfeld-Auswahlstil mit CSS erstellt werden kann, der Auswahleffekt des Kontrollkästchens für das Kontrollkästchen jedoch ein Bild oder erfordert Symbolschriftbibliothek

3. Nicht erforderlich JS unterstützt Umschalteffekte

<label for="man" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="man" value="男" checked="checked" /> 男
    <span class="radio-on"></span>
</label>
<label for="woman" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="woman" value="女" /> 女
    <span class="radio-on"></span>
</label>

CSS-Code:

.radio{
    display: inline-block;
    position: relative;
    line-height: 18px;
    margin-right: 10px;
    cursor: pointer;
}
.radio input{
    display: none;
}
.radio .radio-bg{
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-right: 5px;
    padding: 0;
    background-color: #45bcb8;
    border-radius: 100%;
    vertical-align: top;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}
.radio .radio-on{
    display: none;
}
.radio input:checked + span.radio-on{
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 100%;
    background: #FFFFFF;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset;
    background-image: linear-gradient(#ffffff 0, #e7e7e7 100%);
    transform: scale(0, 0);
    transition: all 0.2s ease;
    transform: scale(1, 1);
    display: inline-block;
}

Das Wichtigste bei dieser Methode ist der Klassenname von Der ausgewählte Effekt: .radio input:checked + span.radio-on

+ ist eine Pseudoklasse von CSS2 und hat die Bedeutung: div+p wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente unmittelbar nach dem 44a8922e6607b31d059827e4b04a93b9-Element.

Das heißt, suchen Sie die ausgewählte (:checked) Eingabe und das Span-Element mit dem Klassennamen radio-on, nachdem es einen ausgewählten Kreiseffekt erzeugt.

Es gibt viele Möglichkeiten, das Etikett im Internet zu verschönern, indem man das Etikett in einen Kreis umwandelt. In diesem Fall muss jedoch der einzelne ausgewählte Text außerhalb des Etiketts platziert werden, was zu Problemen führt Probleme beim Klicken auf den Text, der Radioeffekt kann nicht umgeschaltet werden.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Radiobeispiels für CSS3-Verschönerungs-Radiobuttons. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!