Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie reines CSS3, um die gemeinsame Nutzung von Optionsfeld-Beispielcodes zu verschönern

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

黄舟
Freigeben: 2017-07-18 13:43:06
Original
1636 Leute haben es durchsucht


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:

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

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage