Here is a Pen<\/a> with some of the testing from this article in it.<\/p>\n","protected":false},"excerpt":{"rendered":"There has always been big differences across how different browsers handle form styling. There probably always will be – because UI design choices aren’t described in the specs. Browser makers perhaps view this as one of the ways they can differentiate the user experience a bit. Select (dropdown) menus are one that is particularly weird.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":312544,"url":"https:\/\/css-tricks.com\/striking-a-balance-between-native-and-custom-select-elements\/","url_meta":{"origin":19072,"position":0},"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 element. We\u2019re going\u2026","rel":"","context":"In "Article"","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":297747,"url":"https:\/\/css-tricks.com\/the-current-state-of-styling-selects-in-2019\/","url_meta":{"origin":19072,"position":1},"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 "Article"","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":13303,"url":"https:\/\/css-tricks.com\/convert-menu-to-dropdown\/","url_meta":{"origin":19072,"position":2},"title":"Convert a Menu to a Dropdown for Small Screens","date":"July 15, 2011","format":false,"excerpt":"Create a menu that, on smaller screens, changes into a dropdown menu. A dropdown takes up much less screen real estate and can be easier to use. This tutorial shows you how and discusses the ups and downs.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/07\/iphoneselect.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7690,"url":"https:\/\/css-tricks.com\/dynamic-dropdowns\/","url_meta":{"origin":19072,"position":3},"title":"So You Need To Fill a Dropdown\u00a0Dynamically","date":"October 29, 2010","format":false,"excerpt":"You have one dropdown menu, and depending on the user's choice in that one, a second dropdown gets filled with choices. Let's cover three different ways you can go about that. View Demo \u00a0 Download Files The Markup For our example, the markup will always be the same, just two\u2026","rel":"","context":"In "Advanced"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/10\/database2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":311116,"url":"https:\/\/css-tricks.com\/radio-buttons-are-like-selects-checkboxes-are-like-multiple-selects\/","url_meta":{"origin":19072,"position":4},"title":"Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects","date":"May 20, 2020","format":false,"excerpt":"I was reading Anna Kaley's \"Listboxes vs. Dropdown Lists\" post the other day. It's a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single select) or checkboxes (multiple select) if you're showing five\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/radio-checkbox-select.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3649,"url":"https:\/\/css-tricks.com\/making-selects-printable\/","url_meta":{"origin":19072,"position":5},"title":"Make a Select’s Options Printable","date":"September 4, 2009","format":false,"excerpt":"When printing a web page with elements on it, the select dropdown prints just like it looks. This is of course borderline useless on a printed page. It may even be hiding important details vital to understanding what the printed page is about (e.g. options for a product). Unfortunately\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19072"}],"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=19072"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19072\/revisions"}],"predecessor-version":[{"id":311117,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19072\/revisions\/311117"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}