CSS-Implementierung von Radio- und Kontrollkästchen-Implementierungseffekten

Dieser Artikel stellt hauptsächlich die relevanten Informationen zu den Beispielen der reinen CSS-Implementierung von Radio- und Checkbox-Effekten vor. Der Inhalt ist jetzt recht gut und dient als Referenz.

radio-and-checkbox

Reines CSS, um Radio- und Kontrollkästcheneffekte zu erzielen

reset-radio

Bei der Entwicklung PC-seitiger Projekte werden häufig Radio- und Kontrollkästchenkomponenten verwendet. Da der native Stil jedoch relativ unvereinbar mit dem Designstil des Designers ist, beziehen wir uns häufig auf Module von Drittanbietern, um ihn zu implementieren, oder warten auf JS andere Möglichkeiten zum Hacken. Dies erhöht nicht nur relativ die Codemenge, sondern ist auch sehr kompliziert. Daher haben wir diese reine CSS-Implementierung, die auf nativer Eingabe[Radio] und Eingabe[Kontrollkästchen] basiert. Der Hauptcode lautet wie folgt:

HTML-Hauptcode

<p class="reset-radio">
    <input checked type="radio" id="age1" name="age">
    <span class="real-target"></span>
</p>

CSS-Code, hier wird hauptsächlich eine untergeordnete Knotenspanne verwendet, um mit der Eingabe übereinzustimmen:geprüfter Geschwisterselektor, um den Stil zu ändern

.reset-radio {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
}

.reset-radio .real-target {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    background: #ffffff;
    border: 1px solid #dadde0;
    border-radius: 100%;
    top: 0;
    left: 0;
    bottom: 0;
}

.reset-radio input[type=radio] {
    cursor: pointer;
    z-index: 2;
    width: 16px;
    height: 16px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    right: 0;
    bottom: 0;
}

.reset-radio input:checked+span {
    border-color: #48b4ec;
}

.reset-radio input:checked+span::before {
    content: '';
    position: absolute;
    background: #48b4ec;
    width: 6px;
    height: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
}

Reset-Checkbox

Das Prinzip von Reset-Checkbox ist dasselbe, daher werde ich nicht auf Details eingehen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Auswirkung der Auswahl von CSS-Attributen auf die Animationsleistung

Simulieren der CSS3-Box – im IE Wirkung des Schattens

Die Verschönerung und Funktion des Div-Imitation-Kontrollkästchen-Formularstils

Das obige ist der detaillierte Inhalt vonCSS-Implementierung von Radio- und Kontrollkästchen-Implementierungseffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!