Das::checkmarkCSSPseudo-Element zielt auf das Häkchen ab, das innerhalb des derzeit ausgewählten<option>-Elements einesanpassbaren Select-Elements platziert wird. Es kann verwendet werden, um visuell anzuzeigen, welcher Eintrag ausgewählt ist.

Probieren Sie es aus

<label for="pet-select">  Select pet:</label><br /><select>  <option value="cat">Cat</option>  <option value="dog">Dog</option>  <option value="chicken">    Chicken  </option></select>

option::checkmark {  color: orange;  font-size: 1.5rem;}select,::picker(select) {  appearance: base-select;  width: 200px;}select {  border: 2px solid #dddddd;  background: #eeeeee;  padding: 10px;}::picker(select) {  border: none;}option {  border: 2px solid #dddddd;  background: #eeeeee;  padding: 10px;}option:first-of-type {  border-radius: 8px 8px 0 0;}option:last-of-type {  border-radius: 0 0 8px 8px;}option:nth-of-type(odd) {  background: white;}option:not(option:last-of-type) {  border-bottom: none;}

Syntax

::checkmark {  /* ... */}

Beschreibung

Das::checkmark Pseudo-Element zielt auf das Häkchen ab, das innerhalb einesanpassbaren Select-Elements im derzeit ausgewählten<option> platziert wird.

Es ist nur ansteuerbar, wenn das Ursprungs-Element einen Auswahlmechanismus hat und das basale Erscheinungsbild darauf über dieappearance-Eigenschaft mit dem Wertbase-select gesetzt ist. Die generierte Box erscheint vor allen Boxen, die vom::before Pseudo-Element generiert werden. Das Icon kann mit dercontent-Eigenschaft angepasst werden.

Der::checkmark-Selektor ist zum Beispiel nützlich, wenn Sie das Häkchen ausblenden, ein benutzerdefiniertes Icon verwenden oder die Position des Häkchens im<option>-Element anpassen möchten.

Beispiele

Anpassung des Häkchens

Um die Funktionalität eines anpassbaren Select-Elements zu verwenden, müssen sowohl das<select>-Element als auch dessen Auswahlmechanismus einenappearance-Wert vonbase-select gesetzt haben:

select,::picker(select) {  appearance: base-select;}

Angenommen,Flexbox wird verwendet, um die<option>-Elemente anzuordnen (was in denaktuellen Implementierungen von anpassbaren Selects der Fall ist), können Sie dann das Häkchen vom Anfang der Zeile zum Ende verschieben, indem Sie einenorder-Wert größer als0 darauf setzen und es mit einemauto-Wert fürmargin-left am Ende der Zeile ausrichten (sieheAusrichtung und automatische Ränder).

Der Wert dercontent-Eigenschaft könnte auch auf ein anderes Emoji gesetzt werden, um das angezeigte Icon zu ändern.

option::checkmark {  order: 1;  margin-left: auto;  content: "☑️";}

Sehen Sie sichStyling the current selection checkmark für ein vollständiges Beispiel an, das diesen Code verwendet, zusammen mit einer Live-Beispieldarstellung.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <select>,<option>,<optgroup>,<label>,<button>,<selectedcontent>
• appearance
• ::picker(select),::picker-icon
• :open,:checked
• Anpassbare Select-Elemente