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.

Dann wird der Standardstatus des Kontrollkästchens festgelegt , hier verwenden Sie die Beschriftung zum Festlegen, ihre Höhe und Breite stimmen mit den .i-Check-Einstellungen überein, geben Sie ihr dann eine Hintergrundfarbe und legen Sie ihre Position fest.

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

Wir haben den Standardstatus bereits festgelegt Analyse: Was zu diesem Zeitpunkt benötigt wird, ist ein ausgewählter Status. Wie oben erwähnt, wird der ausgewählte Status durch ein Häkchen dargestellt. Hier verwenden wir die Pseudo-Klasse, um ihn festzulegen, seinen Rand festzulegen und den Status danach zu drehen Es wird jedoch zu einem Häkchen. Das Häkchen ist jedoch ausgeblendet, daher haben wir eine Deckkraft von 0 verwendet Das Kontrollkästchen wird angeklickt. Vervollständigen Sie es mit

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

Zwei Möglichkeiten, CSS zu verwenden, um Code zu implementieren, der die Größe des Hintergrundbilds beim Zoomen des Browsers nicht ändert

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!