Verwenden Sie CSS, um den Stil der grünen Kontrollkästchenschaltfläche anzupassen

In diesem Artikel wird hauptsächlich der Stil der benutzerdefinierten grünen CSS-Kontrollkästchen-Schaltfläche vorgestellt, die einen bestimmten Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

HTMLs eigener Komplex Das Auswahlfeld oder Radio Manchmal müssen diese Formularsteuerelemente mit Hilfe von JS verschönert werden wir wollen.

Rendering:

Lassen Sie uns direkt zum Thema übergehen. Das erste, was mir in den Sinn kommt, ist, dass das Kontrollkästchen eine Hintergrundfarbe benötigt. Dann gibt es ein Kontrollkästchen für den ausgewählten Status. Wir können hier einfach „Häkchen“ als Kontrollkästchen für das gesamte Kontrollkästchen verwenden einfach

<p class="i-check">
       <input type="checkbox" value="0" />
       <label></label>
</p>

Die Größe des Kontrollkästchens wird nach Ihren eigenen Bedürfnissen bestimmt. Der Rand wird hier festgelegt, um es in der Mitte des Browsers anzuzeigen.

.i-check {   
    width: 20px;   
    height: 20px;   
    position: relative;   
    margin: 20px auto;   
}

.i-check label {   
   width: 20px;   
   height: 20px;   
   cursor: pointer;   
   position: absolute;   
   top: 0;   
   left: 0;   
   background: #1A9909;   
   border-radius: 4px;

. Vergessen Sie nicht, den Stil, die Höhe und das Kontrollkästchen „Eingabe“ festzulegen Die Breite muss mit der Gesamtgröße übereinstimmen, sodass der Benutzer in diesem Bereich auf „OK“ klicken kann es bedeutet nicht, dass es tatsächlich ausgeblendet und entfernt wird. In diesem Fall wird es keinen Klickeffekt geben. Es muss lediglich die Deckkraft verwendet werden, um es auf 0 zu setzen.

.i-check  label:after {   
    content: '';   
    width: 9px;   
    height: 5px;   
    position: absolute;   
    top: 4px;   
    left: 4px;   
    border: 3px solid #fff;   
    border-top: none;   
    border-right: none;   
    background: transparent;   
    opacity: 0;   
    transform: rotate(-45deg);   
}

Okay, der gesamte Effekt Auf die gleiche Weise können Sie auch die Wirkung des Optionsfelds einstellen.

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

Verwandte Empfehlungen:

So legen Sie CSS fest Textschriftfarbe

So lösen Sie das Problem der Lücken unter CSS-Bildern

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den Stil der grünen Kontrollkästchenschaltfläche anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!