So verwenden Sie reines CSS3, um die gemeinsame Nutzung von Optionsfeld-Beispielcodes zu verschönern

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

1. Sie ist mit IE9 und höher kompatibel IE8, Sie müssen einen Hack für IE schreiben. Entfernen Sie den Stil

2. Es wird nur das Radio-Button-Radio unterstützt, da der Kreis im Radio-Button-Auswahlstil mit CSS erstellt werden kann, die Auswahl des Kontrollkästchens für den Check-Button jedoch Für den Effekt ist eine Bild- oder Symbolschriftbibliothek erforderlich

3. Zur Unterstützung von Wechseleffekten ist kein JS erforderlich

Das Bild unten ist die endgültige Darstellung:

HTML-Code:

<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 dieser Methode ist der Klassenname des ausgewählten Effekts: .radio input:checked + span.radio-on

+ ist eine Pseudoklasse von CSS2, ihre Bedeutung ist: p+p wählt das Element unmittelbar nach dem

Alle

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, aber in diesem Fall muss der einzelne ausgewählte Text außerhalb des Etiketts platziert werden, was dazu führt Probleme beim Klicken auf den Text, der Radioeffekt kann nicht umgeschaltet werden.

Also habe ich der Beschriftung einen Span mit dem Klassennamen radio-bg hinzugefügt, um speziell den großen Kreis hinten zu erstellen, und dann einen Span mit dem Klassennamen radio-on verwendet, um den ausgewählten kleinen Kreis darin zu erstellen die Vorderseite.

Auf diese Weise bleibt der Text im angeklickten Label erhalten und die Wirkung der Radioauswahl kann auch umgeschaltet werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS3, um die gemeinsame Nutzung von Optionsfeld-Beispielcodes zu verschönern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!