From 4e4b77cb9af3e91c51af5b1d654acf26e2bdd496 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 5 Mar 2025 17:58:00 +0000 Subject: [PATCH 01/15] Document customizable ` elements because they contain internals that are styled at the operating system level, which can't be targeted using CSS. This includes the drop-down picker, the arrow icon, etc. + +Previously the best option we had available, aside from using a custom JavaScript library, was to set an {{cssxref("appearance")}} value of `none` on the `` elements provide a solution to these issues. They allow you to build examples like the following, using only HTML and CSS: + +{{EmbedLiveSample("full-render", "100%", "200px")}} + +We'll show you how to build this example in the sections below. + +## What features comprise a customizable select? + +You can build customizable `` element, otherwise known as the **select {{htmlelement("button")}}**, as it is the button you need to press to open the drop-down menu. +- The {{cssxref("::picker()", "::picker(select)")}} pseudo-element, which targets the entire contents of the select drop-down menu, otherwise known as the **picker**. The picker contains everything inside the `` element and the `::picker(select)` pseudo-element into the browser-defined default styles and behavior for customizable select. +- The {{cssxref(":open")}} pseudo-class, which targets the select ` + + + + + + + + + +

+ +``` + +This is nearly the same as "classic" `` contents represents the picker (the `` value](/en-US/docs/Web/API/HTMLSelectElement/value) via JavaScript. The selected `