{"id":74176,"date":"2025-10-15T21:00:56","date_gmt":"2025-10-15T13:00:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74176"},"modified":"2025-10-01T16:05:40","modified_gmt":"2025-10-01T08:05:40","slug":"customizing-html-select-elements-guide","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/customizing-html-select-elements-guide\/","title":{"rendered":"A Look Into Customizable HTML Select Elements"},"content":{"rendered":"

The <select><\/code> element is one of the most common form controls on the web, but it has always been one of the hardest to style. That\u2019s because browsers just let the OS decide how it looks, especially for the dropdown list and arrow icon.<\/p>\n

While this approach keeps the design consistent with native apps, it also means the appearance can vary a lot across devices and browsers. If you wanted a custom design, you often had to rebuild the whole thing from scratch using JavaScript libraries like React Aria<\/a> or Shadcn UI<\/a>. This added more code to maintain, and often could lead to accessibility issues and slower performance.<\/p>\n

Now, thanks to a new HTML standard, there are better ways to style the <select><\/code> element without the trade-offs. Let\u2019s take a look at how it works.<\/p>\n

\n

What\u2019s in the new standard?<\/h2>\n

This new standard introduces a new <selectedcontent><\/code> element which allows you to define custom content for the selected option in a <select><\/code> dropdown, including adding some HTML instead of just text.<\/p>\n

The standard also specifies a new CSS property value, appearance: base-select;<\/code>. This base-select<\/code> value tells the browser to remove all its default operating system styling and use a very minimal base styles instead.<\/p>\n

Along with this CSS property, it also introduces a new pseudo-element, ::picker(select)<\/code> and the ::picker-icon<\/code>, which allows you to select and style the dropdown list.<\/p>\n

\n

Usage<\/h2>\n

To use these new standards, we can simply add the appearance: base-select;<\/code> property to your <select><\/code> element itself and its ::picker(select) <\/code>pseudo-element, like below.<\/p>\n

\r\n.custom-select {\r\n  appearance: base-select;\r\n}\r\n.custom-select::picker(select) {\r\n  appearance: base-select;\r\n}\r\n<\/pre>\n
As we can see below, this CSS would remove the default OS-styles.<\/p>\n
\n        \"Select
Before and after applying appearance: base-select;<\/code><\/figcaption><\/figure>\n
On the HTML side, we can now add rich content. For example, we can add an icon with an emoji within each of the options.<\/p>\n
\r\n<select name=\"country\" id=\"custom-select\">\r\n    <button>\r\n        <selectedcontent><\/selectedcontent>\r\n    <\/button>\r\n    <option value=\"ID\">\r\n        <span class=\"flag\">\ud83c\uddee\ud83c\udde9<\/span>\r\n        <span class=\"text\">Indonesia<\/span>\r\n    <\/option>\r\n    <option value=\"MY\">\r\n        <span class=\"flag\">\ud83c\uddf2\ud83c\uddfe<\/span>\r\n        <span class=\"text\">Malaysia<\/span>\r\n    <\/option>\r\n    <option value=\"SG\">\r\n        <span class=\"flag\">\ud83c\uddf8\ud83c\uddec<\/span>\r\n        <span class=\"text\">Singapore<\/span>\r\n    <\/option>\r\n<\/select>\r\n<\/pre>\n
We\u2019ve added it with a span<\/code> and the class, so we could style it with CSS, and used a button<\/code> element with the <selectedcontent><\/code> element to be able to fully customize the selected option\u2019s appearance, such as adding a custom dropdown icon.<\/p>\n
Adding custom dropdown icon<\/h3>\n
For the dropdown icon, we\u2019ll be using an SVG icon, as follows:<\/p>\n
\r\n<select name=\"country\" class=\"custom-select\">\r\n    <button>\r\n        <selectedcontent><\/selectedcontent>\r\n        <svg\r\n            class=\"dropdown-icon\"\r\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n        >\r\n            <path d=\"m6 9 6 6 6-6\"><\/path>\r\n        <\/svg>\r\n    <\/button>\r\n    ...\r\n<\/select>\r\n<\/pre>\n
And we\u2019ll hide the default dropdown icon using the ::picker-icon<\/code> pseudo-element.<\/p>\n
\r\n.custom-select::picker-icon {\r\n    display: none;\r\n}\r\n<\/pre>\n
After adding a few more styles on the button to align and control the icon size, we can see a nicer result of our custom select element:<\/p>\n
\n        \"Custom\n    <\/figure>\n
\n
Styling the dropdown<\/h2>\n
Once we\u2019ve customized the selected element and icon, we can style the dropdown list itself.<\/p>\n
For example, you could give the dropdown a subtle border, a shadow for depth, and adjust the spacing between options for better readability:<\/p>\n
\r\n.custom-select::picker(select) {\r\n  border: 1px solid #d4d4d4;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  font-family: sans-serif;\r\n  border-radius: 3px;\r\n  font-size: 0.85rem;\r\n  margin-top: 2px;\r\n}\r\n\r\n.custom-select option {\r\n  padding: 4px;\r\n}\r\n\r\n.custom-select option .flag {\r\n  margin-right: 2px;\r\n}\r\n<\/pre>\n
Styling the selected element<\/h3>\n
Next, we can style the selected element itself. For example, we can add a different background color to make it stand out more.<\/p>\n
\r\n.custom-select option:is(:checked) {\r\n    background: #bedbff;\r\n}\r\n<\/pre>\n
Another thing we could also change is the checkmark icon that appears when an option is selected. We can use the ::checkmark<\/code> pseudo-element to style it.<\/p>\n
For example, here we\u2019ve changed it to use \u201c\u2714\u201d instead of the default check mark icon, and changed it to a blue color to match the background.<\/p>\n
\r\n.custom-select option::checkmark {\r\n  content: \"\u2714\";\r\n  color: #1c398e;\r\n}\r\n<\/pre>\n
With these styles, we can see a more polished dropdown:<\/p>\n