{"id":280590,"date":"2018-12-31T12:22:03","date_gmt":"2018-12-31T19:22:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=280590"},"modified":"2020-05-11T16:36:06","modified_gmt":"2020-05-11T23:36:06","slug":"styling-a-select-like-its-2019","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/styling-a-select-like-its-2019\/","title":{"rendered":"Styling a Select Like It\u2019s 2019"},"content":{"rendered":"\n<p>It\u2019s rather heartwarming to know you can style a\u00a0<code>&lt;select><\/code>\u00a0in a rather cross-browser friendly way that doesn\u2019t hurt accessibility. Kudos for\u00a0<a href=\"http:\/\/filamentgroup.github.io\/select-css\/demo\/\" rel=\"noopener\">documenting this<\/a>\u00a0Scott!<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYYZaGP\" src=\"\/\/codepen.io\/anon\/embed\/zYYZaGP?height=450&amp;theme-id=1&amp;slug-hash=zYYZaGP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYYZaGP\" title=\"CodePen Embed zYYZaGP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s rather heartwarming to know you can style a\u00a0&lt;select>\u00a0in a rather cross-browser friendly way that doesn\u2019t hurt accessibility. Kudos for\u00a0documenting this\u00a0Scott!<\/p>\n","protected":false},"author":3,"featured_media":280602,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[595,1559],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/select-gradient.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":298060,"url":"https:\/\/css-tricks.com\/a-super-weird-css-bug-that-affects-text-selection\/","url_meta":{"origin":280590,"position":0},"title":"A Super Weird CSS Bug That Affects Text Selection","date":"November 11, 2019","format":false,"excerpt":"You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug. If you: Leave that selector empty Link it from an external stylesheet (rather than block) Selecting text will have no style at all. \ud83d\ude33\ud83d\ude2c\ud83d\ude15 In other\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/browser-text-selection.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373100,"url":"https:\/\/css-tricks.com\/when-is-it-ok-to-disable-text-selection\/","url_meta":{"origin":280590,"position":1},"title":"When is it OK to Disable Text Selection?","date":"September 14, 2022","format":false,"excerpt":"Using CSS, it\u2019s possible to prevent users from selecting text within an element using user-select: none. Now, it\u2019s understandable why doing so might be considered \u201ccontroversial\u201d. I mean, should we be disabling standard user behaviors? Generally speaking, no, we shouldn\u2019t be doing that. But does disabling text selection have some\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/browser-text-selection.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297747,"url":"https:\/\/css-tricks.com\/the-current-state-of-styling-selects-in-2019\/","url_meta":{"origin":280590,"position":2},"title":"The Current State of Styling Selects in 2019","date":"October 28, 2019","format":false,"excerpt":"Best I could tell from the last time I compiled the most wished-for features of CSS, styling form controls was a major ask. Top 5, I'd say. And of the native form elements that people want to style, Greg Whitworth has some data that the element is more requested than\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/select-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312544,"url":"https:\/\/css-tricks.com\/striking-a-balance-between-native-and-custom-select-elements\/","url_meta":{"origin":280590,"position":3},"title":"Striking a Balance Between Native and Custom Select Elements","date":"June 12, 2020","format":false,"excerpt":"Here\u2019s the plan! We\u2019re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we\u2019re going to make it accessible. We\u2019re not going to try to replicate everything that the browser does by default with a native <select> element. We\u2019re going\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/select-custom-native.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":244369,"url":"https:\/\/css-tricks.com\/force-selection-text-block\/","url_meta":{"origin":280590,"position":4},"title":"Force Selection of Text Block","date":"August 11, 2016","format":false,"excerpt":"Have you ever seen (or put yourself) some text into a or , not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9657,"url":"https:\/\/css-tricks.com\/useful-nth-child-recipies\/","url_meta":{"origin":280590,"position":5},"title":"Useful :nth-child Recipes","date":"June 16, 2011","format":false,"excerpt":"I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/select-gradient.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280590"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=280590"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280590\/revisions"}],"predecessor-version":[{"id":310900,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280590\/revisions\/310900"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280602"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=280590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=280590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=280590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}