Heim >Web-Frontend >CSS-Tutorial >HTML+CSS zur Realisierung ansprechender Optionsschaltflächen und Kontrollkästchen

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

小云云
小云云Original
2017-12-19 10:58:403996Durchsuche

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!

Stellungnahme:
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