How to style a <select> dropdown with CSS only without JavaScript

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 example that will position a select element on the page and render the text of the options in blue.

Example HTML file:

[pastacode lang=”markup” manual=”%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” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]

Example CSS file:

[pastacode lang=”css” manual=”%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” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 2:

You may style any HTML element by its tag name:

[pastacode lang=”css” manual=”select%20%0A%7B%0A%20%20font-weight%3A%20bold%3B%0A%7D” message=”css code” highlight=”” provider=”manual”/]

you can also use a CSS class to style, like any other element:

[pastacode lang=”markup” manual=”%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” message=”html code” highlight=”” provider=”manual”/]

SOLUTION 3:

Styling Select Box with CSS3:

• HTML:

[pastacode lang=”markup” manual=”%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” message=”html code” highlight=”” provider=”manual”/]

• CSS:

[pastacode lang=”css” manual=”body%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’%3C%3E’%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”%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” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 4:

How to CSS form drop down style without using JavaScript .

[pastacode lang=”css” manual=”select%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” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 5:

As of Internet Explorer 10, you can use the ::-ms-expand pseudo element selector to style, and hide, the drop down arrow element.

[pastacode lang=”css” manual=”select%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’s%20space%2Fhitbox%20*%2F%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 6:

• The largest variation we have noticed when styling select drop-downs is Safari and Google Chrome rendering (Firefox is fully customizable through CSS).
• Here the simplest solution by using WebKit:

[pastacode lang=”css” manual=”select%20%0A%7B%0A%20%20-webkit-appearance%3A%20none%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

• It removes the dropdown arrow.
• You can add a dropdown arrow using a nearby div with a background, negative margin or absolutely positioned over the select dropdown.

SOLUTION  7:

Select dropdown style:

Css:

[pastacode lang=”css” manual=”select%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” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 8:

• It uses rotated background layers to cut out a dropdown arrow, as pseudo-elements wouldn’t work for the select element.

• Css:

[pastacode lang=”css” manual=”select%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…%3C%2Foption%3E%0A%3C%2Fselect%3E%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 9:

• Using Bootstrap(http://getbootstrap.com/).
• This is the simplest solution :

[pastacode lang=”css” manual=”select.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” message=”css code” highlight=”” provider=”manual”/] [pastacode lang=”markup” manual=”%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” message=”html code” highlight=”” provider=”manual”/]

SOLUTION 10:

• It can be improved with hover-effects and other mouse events.
• Just make sure that the “button“-element comes right after the select element in the markup. Then target it using the + css-selector

• HTML:

[pastacode lang=”markup” manual=”%3Cselect%20class%3D%22select-input%22%3E…%3C%2Fselect%3E%0A%3Cdiv%20class%3D%22select-button%22%3E%3C%2Fdiv%3E” message=”html code” highlight=”” provider=”manual”/]

• CSS:

[pastacode lang=”css” manual=”.select-input%3Ahover%2B.select-button%20%0A%7B%0A%20%20%20%20%5Bhover%20styles%20here%5D%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

Total

0

Shares

Share 0

Tweet 0

Pin it 0

Share 0

Tags:

css - How to style the option of a html "select“CSS Dropdownscss style select optioncss style select option dropdowncss3 - Styling select dropdown with css onlyDropdown Default StylingHow to style a dropdown with CSS only without JavaScriptHow to style drop down list?How to style select crossbrowserMaking HTML dropdowns not suckselect option css style examplesStyle a Select Box Using Only CSSstyle select cssStyling HTML SelectStyling menus using only CSS/CSS3Styling select dropdown with css only

Share Article

Link Copied!