{"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 &lt;select&gt;dropdown?<br \/>\nWe need to style a &lt;select&gt;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>&lt;select&gt;<\/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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;!DOCTYPE HTML PUBLIC &quot;-\/\/W3C\/\/DTD HTML 4.01\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/html4\/strict.dtd&quot;&gt;<br\/>&lt;html&gt;<br\/>&lt;head&gt;<br\/>  &lt;title&gt;Select Styling&lt;\/title&gt;<br\/>  &lt;link href=&quot;selectExample.css&quot; rel=&quot;stylesheet&quot;&gt;<br\/>&lt;\/head&gt;<br\/>&lt;body&gt;<br\/>&lt;select id=&quot;styledSelect&quot; class=&quot;blueText&quot;&gt;<br\/>  &lt;option value=&quot;apple&quot;&gt;Apple&lt;\/option&gt;<br\/>  &lt;option value=&quot;orange&quot;&gt;Orange&lt;\/option&gt;<br\/>  &lt;option value=&quot;cherry&quot;&gt;Cherry&lt;\/option&gt;<br\/>&lt;\/select&gt;<br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><span style=\"color: #3366ff;\"><strong>Example CSS file:<\/strong><\/span><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">\/* All select elements on page *\/<br\/>select <br\/>{<br\/>  position: relative;<br\/>}<br\/><br\/>\/* Style by class. Effects the text of the contained options. *\/<br\/>.blueText <br\/>{<br\/>  color: #0000FF;<br\/>}<br\/><br\/>\/* Style by id. Effects position of the select drop down. *\/<br\/>#styledSelect <br\/>{<br\/>  left: 100px;<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select <br\/>{<br\/>  font-weight: bold;<br\/>}<\/code><\/pre> <\/div>\n<p><span style=\"color: #3366ff;\"><strong>you can also use a CSS class to style, like any other element:<\/strong><\/span><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;select class=&quot;important&quot;&gt;<br\/>  &lt;option&gt;Important Option&lt;\/option&gt;<br\/>  &lt;option&gt;Another Important Option&lt;\/option&gt;<br\/>&lt;\/select&gt;<br\/><br\/>&lt;style type=&quot;text\/css&quot;&gt;<br\/>  .important <br\/>{<br\/>    font-weight: bold;<br\/>}<br\/>&lt;\/style&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;label&gt;<br\/>    &lt;select&gt;<br\/>        &lt;option selected&gt; Select Box &lt;\/option&gt;<br\/>        &lt;option&gt;Short Option&lt;\/option&gt;<br\/>        &lt;option&gt;This Is A Longer Option&lt;\/option&gt;<br\/>    &lt;\/select&gt;<br\/>&lt;\/label&gt;\u200b<\/code><\/pre> <\/div>\n<ul>\n<li><span style=\"color: #800080;\"><strong>CSS:<\/strong><\/span><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">body, html <br\/>{ <br\/>    background:#444;<br\/>    text-align:center;<br\/>    padding:50px 0;<br\/>}<br\/>select <br\/>{<br\/>    padding:3px;<br\/>    margin: 0;<br\/>    -webkit-border-radius:4px;<br\/>    -moz-border-radius:4px;<br\/>    border-radius:4px;<br\/>    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;<br\/>    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;<br\/>    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;<br\/>    background: #f8f8f8;<br\/>    color:#888;<br\/>    border:none;<br\/>    outline:none;<br\/>    display: inline-block;<br\/>    -webkit-appearance:none;<br\/>    -moz-appearance:none;<br\/>    appearance:none;<br\/>    cursor:pointer;<br\/>}<br\/><br\/>\/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. *\/<br\/><br\/>@media screen and (-webkit-min-device-pixel-ratio:0) <br\/>{<br\/>    select {padding-right:18px}<br\/>}<br\/><br\/>label {position:relative}<br\/>label:after <br\/>{<br\/>    content:&#039;&lt;&gt;&#039;;<br\/>    font:11px &quot;Consolas&quot;, monospace;<br\/>    color:#aaa;<br\/>    -webkit-transform:rotate(90deg);<br\/>    -moz-transform:rotate(90deg);<br\/>    -ms-transform:rotate(90deg);<br\/>    transform:rotate(90deg);<br\/>    right:8px; top:2px;<br\/>    padding:0 0 2px;<br\/>    border-bottom:1px solid #ddd;<br\/>    position:absolute;<br\/>    pointer-events:none;<br\/>}<br\/>label:before <br\/>{<br\/>    content:&#039;&#039;;<br\/>    right:6px; top:0px;<br\/>    width:20px; height:20px;<br\/>    background:#f8f8f8;<br\/>    position:absolute;<br\/>    pointer-events:none;<br\/>    display:block;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select <br\/>{<br\/>    border: 0 none;<br\/>    color: #000;<br\/>    background: transparent;<br\/>    font-size: 20px;<br\/>    font-weight: bold;<br\/>    padding: 2px 10px;<br\/>    width: 378px;<br\/>    *width: 350px;<br\/>    *background: #58B14C;<br\/>}<br\/>#mainselection {<br\/>    overflow: hidden;<br\/>    width: 350px;<br\/>    -moz-border-radius: 9px 9px 9px 9px;<br\/>    -webkit-border-radius: 9px 9px 9px 9px;<br\/>    border-radius: 9px 9px 9px 9px;<br\/>    box-shadow: 1px 1px 11px #330033;<br\/>    background: url(&quot;arrow.gif&quot;) no-repeat scroll 319px 5px #58B14C;<br\/>}<br\/>&lt;div id=&quot;mainselection&quot;&gt;<br\/>    &lt;select&gt;<br\/>    &lt;option&gt;Select an Option&lt;\/option&gt;<br\/>    &lt;option&gt;Option 1&lt;\/option&gt;<br\/>    &lt;option&gt;Option 2&lt;\/option&gt;<br\/>    &lt;\/select&gt;&lt;\/div&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select::-ms-expand <br\/>{<br\/>    display:none;<br\/>    \/* or visibility: hidden; to keep it&#039;s space\/hitbox *\/<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select <br\/>{<br\/>  -webkit-appearance: none;<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select  {<br\/>    outline: 0;<br\/>    overflow: hidden;<br\/>    height: 30px;<br\/>    background: #2c343c;<br\/>    color: #747a80;<br\/>    border: #2c343c;<br\/>    padding: 5px 3px 5px 10px;<br\/>    -moz-border-radius: 6px;<br\/>    -webkit-border-radius: 6px;<br\/>    border-radius: 10px;<br\/>}<br\/>select option {border: 1px solid #000; background: #010;}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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&#8217;t work for the select element.<\/li>\n<\/ul>\n<ul>\n<li><strong>Css:<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select <br\/>{<br\/>  font: 400 12px\/1.3 &quot;Helvetica Neue&quot;, sans-serif;<br\/>  -webkit-appearance: none;<br\/>  appearance: none;<br\/>  border: 1px solid hotpink;<br\/>  line-height: 1;<br\/>  outline: 0;<br\/>  color: hotpink;<br\/>  border-color: hotpink;<br\/>  padding: 0.65em 2.5em 0.55em 0.75em;<br\/>  border-radius: 3px;<br\/>  background: linear-gradient(hotpink, hotpink) no-repeat,<br\/>              linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,<br\/>              linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,<br\/>              linear-gradient(hotpink, hotpink) no-repeat;<br\/>  background-color: white;<br\/>  background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;<br\/>  background-position: right 20px center, right bottom, right bottom, right bottom;   <br\/>}<br\/>&lt;select&gt;<br\/>    &lt;option&gt;So many options&lt;\/option&gt;<br\/>    &lt;option&gt;...&lt;\/option&gt;<br\/>&lt;\/select&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">select.form-control <br\/>{<br\/>    -moz-appearance: none;<br\/>    -webkit-appearance: none;<br\/>    appearancce: none;<br\/>    background-position: right center;<br\/>    background-repeat: no-repeat;<br\/>    background-size: 1ex;<br\/>    background-origin: content-box;<br\/>    background-image:url(\u201cdata:image\/arrow.gif\u201d);<br\/>}<\/code><\/pre> <\/div>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;link href=&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; \/&gt;<br\/>&lt;section class=&quot;container&quot;&gt;<br\/>  &lt;form class=&quot;form-horizontal&quot;&gt;<br\/>    &lt;select class=&quot;form-control&quot;&gt;<br\/>      &lt;option&gt;&lt;\/option&gt;<br\/>      &lt;option&gt;Two&lt;\/option&gt;<br\/>    &lt;\/select&gt;<br\/>  &lt;\/form&gt;<br\/>&lt;\/section&gt;<\/code><\/pre> <\/div>\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 &#8220;<strong>button<\/strong>&#8220;-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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;select class=&quot;select-input&quot;&gt;...&lt;\/select&gt;<br\/>&lt;div class=&quot;select-button&quot;&gt;&lt;\/div&gt;<\/code><\/pre> <\/div>\n<ul>\n<li><span style=\"color: #3366ff;\"><strong>CSS:<\/strong><\/span><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.select-input:hover+.select-button <br\/>{<br\/>    [hover styles here]<br\/>}<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM Is there a CSS-only way to style a &lt;select&gt;dropdown? We need to style a &lt;select&gt;form without any JavaScript. What are the properties we can use to do in CSS? SOLUTION 1: &lt;select&gt; tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is [&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}]}}