{"id":5463,"date":"2025-03-26T16:10:38","date_gmt":"2025-03-26T21:10:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5463"},"modified":"2025-03-26T16:10:40","modified_gmt":"2025-03-26T21:10:40","slug":"early-days-of-customizing-selects","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/early-days-of-customizing-selects\/","title":{"rendered":"Early Days of Customizing Selects"},"content":{"rendered":"\n<p>Chrome 135 (in Beta as I write, probably stable early April?) <a href=\"https:\/\/developer.chrome.com\/blog\/a-customizable-select\">will have customizable select elements in it<\/a>. You opt-in to it in CSS, and once you have, you can go ham on styling regular ol&#8217; <code>&lt;select><\/code>, <code>&lt;option><\/code>, &#8216;n&#8217; friends elements. Very progressive-enhancement friendly as a select without custom styling is&#8230; fine. <\/p>\n\n\n\n<p>It&#8217;s interesting and notable that even when it does ship Chrome is prepared to protect the web:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Chrome has the features behind a Finch experiment in case there is an emergency need to turn it off. If things go well, the experiment will end and the code will be shipped permanently into the source.<\/p>\n<\/blockquote>\n\n\n\n<p>I&#8217;ve seen people playing!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adam&#8217;s <a href=\"https:\/\/codepen.io\/argyleink\/pen\/wvYrZEV\">experiments<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/OJegRzB\">Una showing what you get<\/a> when you opt-in but otherwise change no CSS<\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/Maseone\/pen\/mydKmNR\">Totally custom datepicker<\/a> by Paul <\/li>\n\n\n\n<li><a href=\"https:\/\/utilitybend.com\/blog\/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css\/\">Full exploration and blog post<\/a> by Brecht, with <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/MWdaMxm\">interesting examples<\/a> like combining with <code>position: sticky<\/code>;<\/li>\n\n\n\n<li>While they are at it <a href=\"https:\/\/adactio.com\/journal\/21797\">Jeremy Keith thinks the opt-in could work on <code>legend<\/code><\/a> (\ud83d\udc4d)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Chrome 135 (in Beta as I write, probably stable early April?) will have customizable select elements in it. You opt-in to it in CSS, and once you have, you can go ham on styling regular ol&#8217; &lt;select>, &lt;option>, &#8216;n&#8217; friends elements. Very progressive-enhancement friendly as a select without custom styling is&#8230; fine. It&#8217;s interesting and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,31,50],"class_list":["post-5463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-html","tag-select"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/custom-select.png?fit=1342%2C702&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5463"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5463\/revisions"}],"predecessor-version":[{"id":5466,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5463\/revisions\/5466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5465"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}