Klicken Sie auf die untere rechte Ecke der CSS-Pseudoklasse, um ein Häkchen anzuzeigen, das den ausgewählten Beispielcode anzeigt

Wirkung:

CSS:

.s_Typ {
    Rand: keiner;
    Rahmenradius: 5px;
    Hintergrundfarbe: #f3f3f3;
    Polsterung: 7px 0;
    Farbe: #606266;
    Rand: 5px 2,5 % 5px 0;
    Breite: 30%;
    Position: relativ;
}

.wählen {
    Hintergrundfarbe: #ebf3ff;
    Farbe: #5999fc;
}

.wählen {
    Hintergrundfarbe: #ebf3ff;
    Farbe: #5999fc;
}

.wählen:vor {
    Inhalt: '';
    Position: absolut;
    rechts: 0;
    unten: 0;
    Rand: 9px durchgezogen #5999fc;
    Farbe des oberen Rahmens: transparent;
    Rahmenfarbe links: transparent;
}

html:

<button class="s_type">Alle</button>
<button class="s_type">Sommer 2020</button>

javascript - Argumente:

$('.s_type').on('klicken',function(){
$(this).toggleClass('auswählen');
});

1: Entwerfen Sie den Stil der Schaltfläche selbst (.s_type).
2: Fügen Sie dem Stil, den Sie hinzufügen möchten, einen weiteren Klassennamen hinzu (.select)
3: Fügen Sie Elementen durch Klickereignisse Stile hinzu

Zuerst habe ich über viele Methoden nachgedacht, z. B. das direkte Hinzufügen von content: „✔“ in der Pseudoklasse. Das Ergebnis ist jedoch, dass das Häkchen keine Hintergrundfarbe hat und direkt weiß ist, was nicht akzeptabel ist. Ich habe auch darüber nachgedacht, das UI-Bild direkt auszuschneiden und den Hintergrund oder das Bild direkt auf der Schaltfläche schweben zu lassen, aber später dachte ich, dass das nicht richtig sei. Dann werde ich zuerst an anderen Funktionen arbeiten, sie ausschreiben und dann an dieser hier arbeiten. Ich bin zufällig auf einen Artikel mit der gleichen Funktion gestoßen, die ich brauchte, also habe ich ihn direkt gemäß diesem Blog geschrieben. . . Dann kam der Effekt raus, hahahaha

Später schaute ich mir die UI-Bibliothek an und stellte fest, dass die UI-Bibliothek von QQ auch ein spezielles Eckmarkierungsdesign (Adresse) hat.

Anhang: Schauen wir uns den CSS-Checkbox-Stil an

Die folgenden ausgewählten Stile werden häufig in Projekten verwendet.

Ich habe online gesucht und herausgefunden, dass die Idee darin besteht, das Rechteck zu verformen und den Index- CSS-Stil durch Pseudoelemente zu implementieren:

.wählen {
		Position: relativ;
		Breite: 81px;
		Höhe: 93px;
		Rand: 0 automatisch;
		Textausrichtung: zentriert;
		Zeilenhöhe: 93px;
		Farbe: #4ABE84;
		Hintergrundfarbe: #fff;
		Boxschatten: 0px 2px 7px 0px rgba (85,110,97,0,35);
		Rahmenradius: 7px;
		Rand: 1px durchgezogen rgba(74,190,132,1);
	}
	.wählen:vor {
		Inhalt: '';
		Position: absolut;
		rechts: 0;
		unten: 0;
		Rand: 17px durchgezogen #4ABE84;
		Farbe des oberen Rahmens: transparent;
		Rahmenfarbe links: transparent;
	}
	.wählen:nach {
		Inhalt: '';
		Breite: 5px;
		Höhe: 12px;
		Position: absolut;
		rechts: 6px;
		unten: 6px;
		Rand: 2px durchgezogen #fff;
		Farbe des oberen Rahmens: transparent;
		Rahmenfarbe links: transparent;
		transformieren: drehen (45 Grad);
	}

Dann verwenden wir div, um den Effekt zu zeigen:

<div Klasse="Auswählen">Test</div>

Beenden.

Dies ist das Ende dieses Artikels über den Beispielcode zum Klicken auf das Häkchen in der unteren rechten Ecke einer CSS-Pseudoklasse, um eine Auswahl anzuzeigen. Weitere Informationen zum Häkchen in der unteren rechten Ecke von CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!