{"id":518,"date":"2017-03-16T14:02:12","date_gmt":"2017-03-16T14:02:12","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=518"},"modified":"2018-10-26T16:45:41","modified_gmt":"2018-10-26T11:15:41","slug":"how-style-select-dropdown-css-without-javascript","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-style-select-dropdown-css-without-javascript\/","title":{"rendered":"How to style a &lt;select&gt; dropdown with CSS only without JavaScript"},"content":{"rendered":"<h2 id=\"problem\"><span style=\"color: #993300;\"><label class=\"label label-warning\">PROBLEM<\/label><\/span><\/h2>\n<p>Is there a <a href=\"https:\/\/www.wikitechy.com\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a>-only way to style a <select>dropdown?<br \/>\nWe need to style a <select>form without any <a href=\"https:\/\/www.wikitechy.com\/tutorials\/javascript\/javascript-tutorial#topic18\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a>. What are the properties we can use to do in CSS?<\/p>\n<h3 id=\"solution-1\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 1:<\/label><\/span><\/h3>\n<p><strong><select><\/strong> tags can be styled through<strong> CSS<\/strong> just like any other HTML element on an <a href=\"https:\/\/www.wikitechy.com\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> page rendered in a browser. Below is an example that will position a select element on the page and render the text of the options in blue.<\/p>\n<p><span style=\"color: #3366ff;\"><strong>Example HTML file:<\/strong><\/span><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3C!DOCTYPE%20HTML%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20HTML%204.01%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fstrict.dtd%22%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Ctitle%3ESelect%20Styling%3C%2Ftitle%3E%0A%20%20%3Clink%20href%3D%22selectExample.css%22%20rel%3D%22stylesheet%22%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cselect%20id%3D%22styledSelect%22%20class%3D%22blueText%22%3E%0A%20%20%3Coption%20value%3D%22apple%22%3EApple%3C%2Foption%3E%0A%20%20%3Coption%20value%3D%22orange%22%3EOrange%3C%2Foption%3E%0A%20%20%3Coption%20value%3D%22cherry%22%3ECherry%3C%2Foption%3E%0A%3C%2Fselect%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><span style=\"color: #3366ff;\"><strong>Example CSS file:<\/strong><\/span><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%2F*%20All%20select%20elements%20on%20page%20*%2F%0Aselect%20%0A%7B%0A%20%20position%3A%20relative%3B%0A%7D%0A%0A%2F*%20Style%20by%20class.%20Effects%20the%20text%20of%20the%20contained%20options.%20*%2F%0A.blueText%20%0A%7B%0A%20%20color%3A%20%230000FF%3B%0A%7D%0A%0A%2F*%20Style%20by%20id.%20Effects%20position%20of%20the%20select%20drop%20down.%20*%2F%0A%23styledSelect%20%0A%7B%0A%20%20left%3A%20100px%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-2\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 2:<\/label><\/span><\/h3>\n<p><span style=\"color: #3366ff;\"><strong>You may style any HTML element by its tag name:<\/strong><\/span><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect%20%0A%7B%0A%20%20font-weight%3A%20bold%3B%0A%7D\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><span style=\"color: #3366ff;\"><strong>you can also use a CSS class to style, like any other element:<\/strong><\/span><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cselect%20class%3D%22important%22%3E%0A%20%20%3Coption%3EImportant%20Option%3C%2Foption%3E%0A%20%20%3Coption%3EAnother%20Important%20Option%3C%2Foption%3E%0A%3C%2Fselect%3E%0A%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20.important%20%0A%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%7D%0A%3C%2Fstyle%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-3\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 3:<\/label><\/span><\/h3>\n<p><span style=\"color: #3366ff;\"><strong>Styling Select Box with CSS3:<\/strong><\/span><\/p>\n<ul>\n<li><span style=\"color: #800080;\"><strong>HTML:<\/strong><\/span><\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Clabel%3E%0A%20%20%20%20%3Cselect%3E%0A%20%20%20%20%20%20%20%20%3Coption%20selected%3E%20Select%20Box%20%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3Coption%3EShort%20Option%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3Coption%3EThis%20Is%20A%20Longer%20Option%3C%2Foption%3E%0A%20%20%20%20%3C%2Fselect%3E%0A%3C%2Flabel%3E%E2%80%8B%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><span style=\"color: #800080;\"><strong>CSS:<\/strong><\/span><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbody%2C%20html%20%0A%7B%20%0A%20%20%20%20background%3A%23444%3B%0A%20%20%20%20text-align%3Acenter%3B%0A%20%20%20%20padding%3A50px%200%3B%0A%7D%0Aselect%20%0A%7B%0A%20%20%20%20padding%3A3px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20-webkit-border-radius%3A4px%3B%0A%20%20%20%20-moz-border-radius%3A4px%3B%0A%20%20%20%20border-radius%3A4px%3B%0A%20%20%20%20-webkit-box-shadow%3A%200%203px%200%20%23ccc%2C%200%20-1px%20%23fff%20inset%3B%0A%20%20%20%20-moz-box-shadow%3A%200%203px%200%20%23ccc%2C%200%20-1px%20%23fff%20inset%3B%0A%20%20%20%20box-shadow%3A%200%203px%200%20%23ccc%2C%200%20-1px%20%23fff%20inset%3B%0A%20%20%20%20background%3A%20%23f8f8f8%3B%0A%20%20%20%20color%3A%23888%3B%0A%20%20%20%20border%3Anone%3B%0A%20%20%20%20outline%3Anone%3B%0A%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20-webkit-appearance%3Anone%3B%0A%20%20%20%20-moz-appearance%3Anone%3B%0A%20%20%20%20appearance%3Anone%3B%0A%20%20%20%20cursor%3Apointer%3B%0A%7D%0A%0A%2F*%20Targetting%20Webkit%20browsers%20only.%20FF%20will%20show%20the%20dropdown%20arrow%20with%20so%20much%20padding.%20*%2F%0A%0A%40media%20screen%20and%20(-webkit-min-device-pixel-ratio%3A0)%20%0A%7B%0A%20%20%20%20select%20%7Bpadding-right%3A18px%7D%0A%7D%0A%0Alabel%20%7Bposition%3Arelative%7D%0Alabel%3Aafter%20%0A%7B%0A%20%20%20%20content%3A\u2019%3C%3E\u2019%3B%0A%20%20%20%20font%3A11px%20%22Consolas%22%2C%20monospace%3B%0A%20%20%20%20color%3A%23aaa%3B%0A%20%20%20%20-webkit-transform%3Arotate(90deg)%3B%0A%20%20%20%20-moz-transform%3Arotate(90deg)%3B%0A%20%20%20%20-ms-transform%3Arotate(90deg)%3B%0A%20%20%20%20transform%3Arotate(90deg)%3B%0A%20%20%20%20right%3A8px%3B%20top%3A2px%3B%0A%20%20%20%20padding%3A0%200%202px%3B%0A%20%20%20%20border-bottom%3A1px%20solid%20%23ddd%3B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20pointer-events%3Anone%3B%0A%7D%0Alabel%3Abefore%20%0A%7B%0A%20%20%20%20content%3A\u201d%3B%0A%20%20%20%20right%3A6px%3B%20top%3A0px%3B%0A%20%20%20%20width%3A20px%3B%20height%3A20px%3B%0A%20%20%20%20background%3A%23f8f8f8%3B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20pointer-events%3Anone%3B%0A%20%20%20%20display%3Ablock%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h3 id=\"solution-4\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 4:<\/label><\/span><\/h3>\n<p><span style=\"color: #3366ff;\"><strong>How to CSS form drop down style without using JavaScript\u00a0.<\/strong><\/span><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect%20%0A%7B%0A%20%20%20%20border%3A%200%20none%3B%0A%20%20%20%20color%3A%20%23000%3B%0A%20%20%20%20background%3A%20transparent%3B%0A%20%20%20%20font-size%3A%2020px%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20padding%3A%202px%2010px%3B%0A%20%20%20%20width%3A%20378px%3B%0A%20%20%20%20*width%3A%20350px%3B%0A%20%20%20%20*background%3A%20%2358B14C%3B%0A%7D%0A%23mainselection%20%7B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20width%3A%20350px%3B%0A%20%20%20%20-moz-border-radius%3A%209px%209px%209px%209px%3B%0A%20%20%20%20-webkit-border-radius%3A%209px%209px%209px%209px%3B%0A%20%20%20%20border-radius%3A%209px%209px%209px%209px%3B%0A%20%20%20%20box-shadow%3A%201px%201px%2011px%20%23330033%3B%0A%20%20%20%20background%3A%20url(%22arrow.gif%22)%20no-repeat%20scroll%20319px%205px%20%2358B14C%3B%0A%7D%0A%3Cdiv%20id%3D%22mainselection%22%3E%0A%20%20%20%20%3Cselect%3E%0A%20%20%20%20%3Coption%3ESelect%20an%20Option%3C%2Foption%3E%0A%20%20%20%20%3Coption%3EOption%201%3C%2Foption%3E%0A%20%20%20%20%3Coption%3EOption%202%3C%2Foption%3E%0A%20%20%20%20%3C%2Fselect%3E%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-5\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 5:<\/label><\/span><\/h3>\n<p>As of Internet Explorer 10, you can use the<strong> ::-ms-expand<\/strong> pseudo element selector to style, and hide, the drop down arrow element.<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect%3A%3A-ms-expand%20%0A%7B%0A%20%20%20%20display%3Anone%3B%0A%20%20%20%20%2F*%20or%20visibility%3A%20hidden%3B%20to%20keep%20it\u2019s%20space%2Fhitbox%20*%2F%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-6\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 6:<\/label><\/span><\/h3>\n<ul>\n<li>The largest variation we have noticed when styling select drop-downs is\u00a0<strong>Safari<\/strong> and\u00a0<strong>Google Chrome<\/strong>\u00a0rendering (Firefox is fully customizable through CSS).<\/li>\n<li>Here the simplest solution by using <strong>WebKit<\/strong>:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect%20%0A%7B%0A%20%20-webkit-appearance%3A%20none%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>It removes the<strong> dropdown arrow<\/strong>.<\/li>\n<li>You can add a dropdown arrow using a nearby <strong>div<\/strong> with a background, negative margin or absolutely positioned over the select dropdown.<\/li>\n<\/ul>\n<h3 id=\"solution-7\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION \u00a07:<\/label><\/span><\/h3>\n<p>Select dropdown style:<\/p>\n<p><strong>Css:<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect%20%20%7B%0A%20%20%20%20outline%3A%200%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20height%3A%2030px%3B%0A%20%20%20%20background%3A%20%232c343c%3B%0A%20%20%20%20color%3A%20%23747a80%3B%0A%20%20%20%20border%3A%20%232c343c%3B%0A%20%20%20%20padding%3A%205px%203px%205px%2010px%3B%0A%20%20%20%20-moz-border-radius%3A%206px%3B%0A%20%20%20%20-webkit-border-radius%3A%206px%3B%0A%20%20%20%20border-radius%3A%2010px%3B%0A%7D%0Aselect%20option%20%7Bborder%3A%201px%20solid%20%23000%3B%20background%3A%20%23010%3B%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h3 id=\"solution-8\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 8:<\/label><\/span><\/h3>\n<ul>\n<li>It uses rotated background layers to cut out a dropdown arrow, as pseudo-elements wouldn\u2019t work for the select element.<\/li>\n<\/ul>\n<ul>\n<li><strong>Css:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect%20%0A%7B%0A%20%20font%3A%20400%2012px%2F1.3%20%22Helvetica%20Neue%22%2C%20sans-serif%3B%0A%20%20-webkit-appearance%3A%20none%3B%0A%20%20appearance%3A%20none%3B%0A%20%20border%3A%201px%20solid%20hotpink%3B%0A%20%20line-height%3A%201%3B%0A%20%20outline%3A%200%3B%0A%20%20color%3A%20hotpink%3B%0A%20%20border-color%3A%20hotpink%3B%0A%20%20padding%3A%200.65em%202.5em%200.55em%200.75em%3B%0A%20%20border-radius%3A%203px%3B%0A%20%20background%3A%20linear-gradient(hotpink%2C%20hotpink)%20no-repeat%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20linear-gradient(-135deg%2C%20rgba(255%2C255%2C255%2C0)%2050%25%2C%20white%2050%25)%20no-repeat%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20linear-gradient(-225deg%2C%20rgba(255%2C255%2C255%2C0)%2050%25%2C%20white%2050%25)%20no-repeat%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20linear-gradient(hotpink%2C%20hotpink)%20no-repeat%3B%0A%20%20background-color%3A%20white%3B%0A%20%20background-size%3A%201px%20100%25%2C%2020px%2020px%2C%2020px%2020px%2C%2020px%2060%25%3B%0A%20%20background-position%3A%20right%2020px%20center%2C%20right%20bottom%2C%20right%20bottom%2C%20right%20bottom%3B%20%20%20%0A%7D%0A%3Cselect%3E%0A%20%20%20%20%3Coption%3ESo%20many%20options%3C%2Foption%3E%0A%20%20%20%20%3Coption%3E\u2026%3C%2Foption%3E%0A%3C%2Fselect%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-9\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 9:<\/label><\/span><\/h3>\n<ul>\n<li>Using\u00a0<strong>Bootstrap<\/strong>(<a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/getbootstrap.com\/<\/a>).<\/li>\n<li>This is the simplest solution :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dselect.form-control%20%0A%7B%0A%20%20%20%20-moz-appearance%3A%20none%3B%0A%20%20%20%20-webkit-appearance%3A%20none%3B%0A%20%20%20%20appearancce%3A%20none%3B%0A%20%20%20%20background-position%3A%20right%20center%3B%0A%20%20%20%20background-repeat%3A%20no-repeat%3B%0A%20%20%20%20background-size%3A%201ex%3B%0A%20%20%20%20background-origin%3A%20content-box%3B%0A%20%20%20%20background-image%3Aurl(%E2%80%9Cdata%3Aimage%2Farrow.gif%E2%80%9D)%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Clink%20href%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.6%2Fcss%2Fbootstrap.min.css%22%20rel%3D%22stylesheet%22%20%2F%3E%0A%3Csection%20class%3D%22container%22%3E%0A%20%20%3Cform%20class%3D%22form-horizontal%22%3E%0A%20%20%20%20%3Cselect%20class%3D%22form-control%22%3E%0A%20%20%20%20%20%20%3Coption%3E%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%3ETwo%3C%2Foption%3E%0A%20%20%20%20%3C%2Fselect%3E%0A%20%20%3C%2Fform%3E%0A%3C%2Fsection%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-10\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 10:<\/label><\/span><\/h3>\n<ul>\n<li>It can be improved with <strong>hover-effects<\/strong> and other mouse events.<\/li>\n<li>Just make sure that the \u201c<strong>button<\/strong>\u201c-element comes right after the select element in the markup. Then target it using the + <a href=\"https:\/\/www.wikitechy.com\/css\/css-selectors\" target=\"_blank\" rel=\"noopener\">css-selector<\/a><\/li>\n<\/ul>\n<ul>\n<li><span style=\"color: #3366ff;\"><strong>HTML:<\/strong><\/span><\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cselect%20class%3D%22select-input%22%3E\u2026%3C%2Fselect%3E%0A%3Cdiv%20class%3D%22select-button%22%3E%3C%2Fdiv%3E\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><span style=\"color: #3366ff;\"><strong>CSS:<\/strong><\/span><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.select-input%3Ahover%2B.select-button%20%0A%7B%0A%20%20%20%20%5Bhover%20styles%20here%5D%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM Is there a CSS-only way to style a dropdown? We need to style a form without any JavaScript. What are the properties we can use to do in CSS? SOLUTION 1: tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[960,970,972,973,961,969,959,966,967,968,974,962,971,963,964,965],"class_list":["post-518","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-css-how-to-style-the-option-of-a-html-select","tag-css-dropdowns","tag-css-style-select-option","tag-css-style-select-option-dropdown","tag-css3-styling-select-dropdown-with-css-only","tag-dropdown-default-styling","tag-how-to-style-a-dropdown-with-css-only-without-javascript","tag-how-to-style-drop-down-list","tag-how-to-style-select-crossbrowser","tag-making-html-dropdowns-not-suck","tag-select-option-css-style-examples","tag-style-a-select-box-using-only-css","tag-style-select-css","tag-styling-html-select","tag-styling-menus-using-only-csscss3","tag-styling-select-dropdown-with-css-only"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=518"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/518\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}