HTML+CSS zur Realisierung ansprechender Optionsschaltflächen und Kontrollkästchen

Optionsfelder und Kontrollkästchen sind für das Frontend erforderliche Funktionen. In diesem Artikel werden vor allem HTML+CSS-Funktionen vorgestellt, um einen schönen Stil für Optionsfelder und Kontrollkästchen zu erzielen Schöneres Design. Optionsfelder und Kontrollkästchen.

1. Hintergrundbild

HTML

<p class="check-wrappers">
    <span class="c-checkbox checked">
        <input type="radio" autocomplete="off" name="type" style="display:none;" value="1" checked="checked">
    </span>
    <span></span>
</p>

css

.cart-checkbox.checked {
    background-position: -29px 0;
}
.c-checkbox {
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    background: url(/shop-cart.png) no-repeat 0 0;
    background-size: 60px 120px;
}

Hat es jeder gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

Detaillierte Beispiele für die Verwendung von CSS zur Implementierung von Optionsfeldern und Kontrollkästchen

js bzw. jquery Validieren Optionsfelder, Kontrollkästchen, Dropdown-Boxen_Javascript-Techniken

Reiner CSS-Code zur Verschönerung von Kontrollkästchen, Kontrollkästchen, Optionsfeldern und Schiebeschaltflächen, einfache Methode

Das obige ist der detaillierte Inhalt vonHTML+CSS zur Realisierung ansprechender Optionsschaltflächen und Kontrollkästchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!