Optimieren Sie die Stile von Optionsfeldern und Kontrollkästchen

Dieses Mal werde ich Ihnen die Stile zur Optimierung von Optionsfeldern und Kontrollkästchen vorstellen. Was sind die Vorsichtsmaßnahmen für die Optimierung der Stile von Optionsfeldern und Kontrollkästchen ein Blick auf praktische Fälle.

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;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Unpopuläre CSS-Eigenschaften, die Sie nicht kennen

Was sind href und src, link und @ Import? Unterschied

Das obige ist der detaillierte Inhalt vonOptimieren Sie die Stile von Optionsfeldern und Kontrollkästchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!