How do I style a select dropdown with only CSS

Question

Is there a CSS-only way to style a  lt select gt  dropdown   I need to style a  lt select gt  form as much as humanly possible  without any JavaScript  What are the properties I can use to do so in CSS   This code needs to be compatible with all major browsers    Internet Explorer 6  7  and 8 Firefox Safari   I know I can make it with JavaScript  Example   And I m not talking about simple styling  I want to know  what the best we can do with CSS only   I found similar questions on Stack nbsp Overflow   And this one on Doctype com

User · Answer

Use the clip property to crop the borders and the arrow of the select element  then add your own replacement styles to the wrapper    x000D   x000D       lt  DOCTYPE html gt  x000D       lt html gt  x000D         lt head gt  x000D           lt style gt  x000D            select   position  absolute  clip rect 2px 49px 19px 2px   z-index 2    x000D            body  gt  span   display block  position  relative  width  64px  height  21px  border  2px solid green   background  url http   www stackoverflow com favicon ico  right 1px no-repeat    x000D           lt  style gt  x000D         lt  head gt  x000D         lt span gt  x000D           lt select gt  x000D             lt option value    gt Alpha lt  option gt  x000D             lt option value    gt Beta lt  option gt  x000D             lt option value    gt Charlie lt  option gt  x000D           lt  select gt  x000D         lt  span gt  x000D       lt  html gt  x000D   x000D   x000D    Use a second select with zero opacity to make the button clickable    x000D   x000D       lt  DOCTYPE html gt  x000D       lt html gt  x000D         lt head gt  x000D           lt style gt  x000D             real   position  absolute  clip rect 2px 51px 19px 2px   z-index 2    x000D             fake   position  absolute  opacity  0    x000D       x000D            body  gt  span   display block  position  relative  width  64px  height  21px  background  url http   www stackoverflow com favicon ico  right 1px no-repeat    x000D           lt  style gt  x000D         lt  head gt  x000D         lt span gt  x000D           lt select id  real  gt  x000D             lt option value    gt Alpha lt  option gt  x000D             lt option value    gt Beta lt  option gt  x000D             lt option value    gt Charlie lt  option gt  x000D           lt  select gt  x000D           lt select id  fake  gt  x000D             lt option value    gt Alpha lt  option gt  x000D             lt option value    gt Beta lt  option gt  x000D             lt option value    gt Charlie lt  option gt  x000D           lt  select gt  x000D         lt  span gt  x000D       lt  html gt  x000D   x000D   x000D    Coordinates differ between Webkit and other browsers  but a  media query can cover that   References   Dojo FX Tests  dojox fx ext-dojo complex CSS Masking  Test clip property with rect function and auto values clip to border box

User · Answer

The blog post How to CSS form drop down style no JavaScript works for me  but it fails in Opera though    x000D   x000D  select   x000D    border  0 none  x000D    color   FFFFFF  x000D    background  transparent  x000D    font-size  20px  x000D    font-weight  bold  x000D    padding  2px 10px  x000D    width  378px  x000D     width  350px  x000D     background   58B14C  x000D    x000D   x000D   mainselection   x000D    overflow  hidden  x000D    width  350px  x000D    -moz-border-radius  9px 9px 9px 9px  x000D    -webkit-border-radius  9px 9px 9px 9px  x000D    border-radius  9px 9px 9px 9px  x000D    box-shadow  1px 1px 11px  330033  x000D    background  url  arrow gif   no-repeat scroll 319px 5px  58B14C  x000D    x000D   lt div id  mainselection  gt  x000D     lt select gt  x000D       lt option gt Select an Option lt  option gt  x000D       lt option gt Option 1 lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Custom Select CSS styles Tested in Internet  Explorer  10 and 11   Edge  Firefox  and Chrome  x000D   x000D  select  -ms-expand     display  none    select     display  inline-block    box-sizing  border-box    padding  0 5em 2em 0 5em 0 5em    border  1px solid  eee    font  inherit    line-height  inherit    -webkit-appearance  none    -moz-appearance  none    -ms-appearance  none    appearance  none    background-repeat  no-repeat    background-image  linear-gradient 45deg  transparent 50   currentColor 50    linear-gradient 135deg  currentColor 50   transparent 50      background-position  right 15px top 1em  right 10px top 1em    background-size  5px 5px  5px 5px    x000D   lt select name    gt     lt option value    gt Lorem lt  option gt     lt option value    gt Lorem Ipsum lt  option gt   lt  select gt    lt select name    disabled gt     lt option value    gt Disabled lt  option gt   lt  select gt    lt select name    style  color red   gt     lt option value    gt Color  lt  option gt     lt option value    gt Lorem Ipsum lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

You definitely should do it like in Styling select  optgroup and options with CSS  In many ways  background-color and color are just what you would typically need to style options  not the entire select

User · Answer

In modern browsers it s relatively painless to style the  lt select gt  in CSS  With appearance  none the only tricky part is replacing the arrow  if that s what you want   Here s a solution that uses an inline data  URI with plain-text SVG    x000D   x000D  select   x000D    -moz-appearance  none  x000D    -webkit-appearance  none  x000D    appearance  none  x000D     x000D    background-repeat  no-repeat  x000D    background-size  0 5em auto  x000D    background-position  right 0 25em center  x000D    padding-right  1em  x000D     x000D    background-image  url  data image svg xml charset utf-8    x000D       lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 60 40  gt    x000D         lt polygon points  0 0 60 0 30 40  style  fill black    gt    x000D       lt  svg gt     x000D    x000D   lt select gt  x000D     lt option gt Option 1 lt  option gt  x000D     lt option gt Option 2 lt  option gt  x000D   lt  select gt  x000D   x000D   lt select style  font-size  2rem   gt  x000D     lt option gt Option 1 lt  option gt  x000D     lt option gt Option 2 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    The rest of the styling  borders  padding  colors  etc   is fairly straightforward   This works in all the browsers I just tried  Firefox 50  Chrome 55  Edge 38  and Safari 10   One note about Firefox is that if you want to use the   character in the data URI  e g  fill   000  you need to escape it  fill   23000

User · Answer

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 an  overly simple  example that will position a select element on the page and render the text of the options in blue   Example HTML file  selectExample html     lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt   lt head gt     lt title gt Select Styling lt  title gt     lt link href  selectExample css  rel  stylesheet  gt   lt  head gt   lt body gt   lt select id  styledSelect  class  blueText  gt     lt option value  apple  gt Apple lt  option gt     lt option value  orange  gt Orange lt  option gt     lt option value  cherry  gt Cherry lt  option gt   lt  select gt   lt  body gt   lt  html gt    Example CSS file  selectExample css       All select elements on page    select     position  relative        Style by class  Effects the text of the contained options      blueText     color   0000FF        Style by id  Effects position of the select drop down      styledSelect     left  100px

User · Answer

A very nice example that uses  after and  before to do the trick is in Styling Select Box with CSS3   CSSDeck

User · Answer

I had this exact problem  except I couldn t use images and was not limited by browser support  This should be   on spec   and with luck start working everywhere eventually   It uses layered rotated background layers to   cut out   a dropdown arrow  as pseudo-elements wouldn t work for the select element   Edit  In this updated version I am using CSS variables and a tiny theming system    x000D   x000D   root   x000D    --radius  2px  x000D    --baseFg  dimgray  x000D    --baseBg  white  x000D    --accentFg   006fc2  x000D    --accentBg   bae1ff  x000D    x000D   x000D   theme-pink   x000D    --radius  2em  x000D    --baseFg   c70062  x000D    --baseBg   ffe3f1  x000D    --accentFg   c70062  x000D    --accentBg   ffaad4  x000D    x000D   x000D   theme-construction   x000D    --radius  0  x000D    --baseFg  white  x000D    --baseBg  black  x000D    --accentFg  black  x000D    --accentBg  orange  x000D    x000D   x000D  select   x000D    font  400 12px 1 3 sans-serif  x000D    -webkit-appearance  none  x000D    appearance  none  x000D    color  var --baseFg   x000D    border  1px solid var --baseFg   x000D    line-height  1  x000D    outline  0  x000D    padding  0 65em 2 5em 0 55em 0 75em  x000D    border-radius  var --radius   x000D    background-color  var --baseBg   x000D    background-image  linear-gradient var --baseFg   var --baseFg    x000D      linear-gradient -135deg  transparent 50   var --accentBg  50    x000D      linear-gradient -225deg  transparent 50   var --accentBg  50    x000D      linear-gradient var --accentBg  42   var --accentFg  42    x000D    background-repeat  no-repeat  no-repeat  no-repeat  no-repeat  x000D    background-size  1px 100   20px 22px  20px 22px  20px 100   x000D    background-position  right 20px center  right bottom  right bottom  right bottom     x000D    x000D   x000D  select hover   x000D    background-image  linear-gradient var --accentFg   var --accentFg    x000D      linear-gradient -135deg  transparent 50   var --accentFg  50    x000D      linear-gradient -225deg  transparent 50   var --accentFg  50    x000D      linear-gradient var --accentFg  42   var --accentBg  42    x000D    x000D   x000D  select active   x000D    background-image  linear-gradient var --accentFg   var --accentFg    x000D      linear-gradient -135deg  transparent 50   var --accentFg  50    x000D      linear-gradient -225deg  transparent 50   var --accentFg  50    x000D      linear-gradient var --accentFg  42   var --accentBg  42    x000D    color  var --accentBg   x000D    border-color  var --accentFg   x000D    background-color  var --accentFg   x000D    x000D   lt select gt  x000D     lt option gt So many options lt  option gt  x000D     lt option gt     lt  option gt  x000D   lt  select gt  x000D   x000D   lt select class  theme-pink  gt  x000D     lt option gt So many options lt  option gt  x000D     lt option gt     lt  option gt  x000D   lt  select gt  x000D   x000D   lt select class  theme-construction  gt  x000D     lt option gt So many options lt  option gt  x000D     lt option gt     lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Here are three solutions  Solution  1 - appearance  none   - with Internet  Explorer  10 - 11 workaround  Demo  -- To hide the default arrow set appearance  none on the select element  then add your own custom arrow with background-image select      -webkit-appearance  none     -moz-appearance  none     appearance  none           Remove default arrow       background-image  url            Add custom arrow       Browser Support  appearance  none has very good browser support  caniuse  - except for Internet  Explorer  11  and later  and Firefox 34  and later   We can improve this technique and add support for Internet  Explorer  10 and Internet  Explorer  11 by adding select  -ms-expand       display  none     Hide the default arrow in Internet Explorer 10 and Internet Explorer 11       If Internet  Explorer  9 is a concern  we have no way of removing the default arrow  which would mean that we would now have two arrows   but  we could use a funky Internet  Explorer  9 selector  To at least undo our custom arrow - leaving the default select arrow intact     Target Internet Explorer 9 to undo the custom arrow     media screen and  min-width 0 0        select           background-image none 9          padding  5px 9           All together   x000D   x000D  select     margin  50px    width  150px    padding  5px 35px 5px 5px    font-size  16px    border  1px solid  CCC    height  34px    -webkit-appearance  none    -moz-appearance  none    appearance  none    background  url https   stackoverflow com favicon ico  96    15  no-repeat  EEE         CAUTION  Internet Explorer hackery ahead      select  -ms-expand       display  none     Remove default arrow in Internet Explorer 10 and 11          Target Internet Explorer 9 to undo the custom arrow     media screen and  min-width 0 0        select           background  none 9          padding  5px 9          x000D   lt select gt     lt option gt Apples lt  option gt     lt option selected gt Pineapples lt  option gt     lt option gt Chocklate lt  option gt     lt option gt Pancakes lt  option gt   lt  select gt  x000D   x000D   x000D   This solution is easy and has good browser support - it should generally suffice   If browser support for Internet  Explorer  9  and later  and Firefox 34   and later  is necessary then keep reading    Solution  2 Truncate the select element to hide the default arrow  demo  --  Read more here  Wrap the select element in a div with a fixed width and overflow hidden  Then give the select element a width of about 20 pixels greater than the div  The result is that the default drop-down arrow of the select element will be hidden  due to the overflow hidden on the container   and you can place any background image you want on the right-hand-side of the div  The advantage of this approach is that it is cross-browser  Internet  Explorer  8 and later  WebKit  and Gecko   However  the disadvantage of this approach is that the options drop-down juts out on the right-hand-side  by the 20 pixels which we hid    because the option elements take the width of the select element     It should be noted  however  that if the custom select element is necessary only for mobile devices - then the above problem doesn t apply - because of the way each phone natively opens the select element  So for mobile  this may be the best solution    x000D   x000D   styled select     background  transparent    width  150px    font-size  16px    border  1px solid  CCC    height  34px     styled     margin  50px    width  120px    height  34px    border  1px solid  111    border-radius  3px    overflow  hidden    background  url https   stackoverflow com favicon ico  96    20  no-repeat  EEE    x000D   lt div class  styled  gt     lt select gt       lt option gt Pineapples lt  option gt       lt option selected gt Apples lt  option gt       lt option gt Chocklate lt  option gt       lt option gt Pancakes lt  option gt     lt  select gt   lt  div gt  x000D   x000D   x000D    If the custom arrow is necessary on Firefox - prior to Version 35 - but you don t need to support old versions of Internet  Explorer - then keep reading    Solution  3 - Use the pointer-events property  demo  --  Read more here  The idea here is to overlay an element over the native drop down arrow  to create our custom one  and then disallow pointer events on it  Advantage  It works well in WebKit and Gecko  It looks good too  no jutting out option elements   Disadvantage  Internet  Explorer  Internet  Explorer 10 and down  doesn t support pointer-events  which means you can t click the custom arrow  Also  another  obvious  disadvantage with this method is that you can t target your new arrow image with a hover effect or hand cursor  because we have just disabled pointer events on them  However  with this method you can use Modernizer or conditional comments to make Internet  Explorer revert to the standard built in arrow  NB  Being that Internet  Explorer 10 doesn t support conditional comments anymore  If you want to use this approach  you should probably use Modernizr  However  it is still possible to exclude the pointer-events CSS from Internet  Explorer 10 with a CSS hack described here   x000D   x000D   notIE     position  relative    display  inline-block    select     display  inline-block    height  30px    width  150px    outline  none    color   74646E    border  1px solid  C8BFC4    border-radius  4px    box-shadow  inset 1px 1px 2px  DDD8DC    background   FFF       Select arrow styling      notIE  fancyArrow     width  23px    height  28px    position  absolute    display  inline-block    top  1px    right  3px    background  url https   stackoverflow com favicon ico  right   90  no-repeat  FFF    pointer-events  none      target Internet Explorer 9 and Internet Explorer 10      media screen and  min-width  0 0       notIE  fancyArrow       display  none        x000D   lt  -- if  IE  gt  -- gt   lt div class  notIE  gt     lt  --  lt   endif -- gt     lt span class  fancyArrow  gt  lt  span gt     lt select gt       lt option gt Apples lt  option gt       lt option selected gt Pineapples lt  option gt       lt option gt Chocklate lt  option gt       lt option gt Pancakes lt  option gt     lt  select gt     lt  -- if  IE  gt  -- gt   lt  div gt   lt  --  lt   endif -- gt  x000D   x000D   x000D

User · Answer

As of Internet Explorer 10  you can use the   -ms-expand pseudo element selector to style  and hide  the drop down arrow element    select  -ms-expand       display none         or visibility  hidden  to keep it s space hitbox        The remaining styling should be similar to other browsers   Here is a basic fork of Danield s jsfiddle that applies support for IE10

User · Answer

select        outline  0      overflow  hidden      height  30px      background   2c343c      color   747a80      border   2c343c      padding  5px 3px 5px 10px      -moz-border-radius  6px      -webkit-border-radius  6px      border-radius  10px     select option  border  1px solid  000  background   010

User · Answer

Here is a version that works in all modern browsers  The key is using appearance none which removes the default formatting  Since all of the formatting is gone  you have to add back in the arrow that visually differentiates the select from the input   Working example  https   jsfiddle net gs2q1c7p    x000D   x000D  select not  multiple     x000D      -webkit-appearance  none  x000D      -moz-appearance  none  x000D      background-position  right 50   x000D      background-repeat  no-repeat  x000D      background-image  url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw eHBhY2tldCBiZWdpbj0i77u IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI PuGsgwQAAAA5SURBVHjaYvz  z8DOYCJgUxAf42MQIzTk0D M KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH do8AAAAASUVORK5CYII    x000D      padding   5em  x000D      padding-right  1 5em x000D    x000D   x000D   mySelect   x000D      border-radius  0 x000D    x000D   lt select id  mySelect  gt  x000D       lt option gt Option 1 lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

A CSS and HTML only solution It seems compatible with Chrome  Firefox  and Internet  Explorer  11  But please leave your feedback regarding other web browsers  As suggested by Danield s answer  I wrap my select in a div  even two divs for x-browser compatibility  to get the expected behavior  See http   jsfiddle net bjap2  HTML   lt div class  quot sort-options-wrapper quot  gt       lt div class  quot sort-options-wrapper-2 quot  gt           lt select class  quot sort-options quot  gt                   lt option value  quot choiceOne quot  gt choiceOne lt  option gt                   lt option value  quot choiceOne quot  gt choiceThree lt  option gt                   lt option value  quot choiceOne quot  gt choiceFour lt  option gt                   lt option value  quot choiceFiveLongTestPurpose quot  gt choiceFiveLongTestPurpose lt  option gt           lt  select gt       lt  div gt       lt div class  quot search-select-arrow-down quot  gt  lt  div gt   lt  div gt   Notice the two div wrappers  Also notice the extra div added to place the arrow-down button wherever you like  positioned absolutely   here we put it on the left  CSS  sort-options-wrapper       display  inline-block      position  relative      border  1px solid  83837F        This second wrapper is needed for x-browser compatibility     sort-options-wrapper-2       overflow  hidden     select       margin-right  -19px     That s what is hiding the default-provided browser arrow        padding-left  13px      margin-left  0      border  none      background  none          margin-top  amp  margin-bottom must be set since some        browsers have default values for select elements        margin-bottom  1px      margin-top  1px     select focus       outline  none     Removing default browsers outline on focus       search-select-arrow-down       position  absolute      height  10px      width  12px      background  url http   i imgur com pHIYN06 png  scroll no-repeat 2px 0px      left  1px      top  5px

User · Answer

The largest inconsistency I ve noticed when styling select dropdowns is Safari and Google Chrome rendering  Firefox is fully customizable through CSS   After some searching through obscure depths of the Internet I came across the following  which nearly completely resolves my qualms with WebKit   Safari and Google Chrome fix   select     -webkit-appearance  none      This does  however  remove 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    More information and other variables are available in CSS property  -webkit-appearance

User · Answer

Here s a solution based on my favorite ideas from this discussion  This allows styling a  lt select  element directly without any additional markup   It works Internet nbsp Explorer nbsp 10  and later  with a safe fallback for Internet nbsp Explorer nbsp 8 9  One caveat for these browsers is that the background image must be positioned and be small enough to hide behind the native expand control   HTML   lt select name  options  gt     lt option value  option-1  gt Option 1 lt  option gt     lt option value  option-2  gt Option 2 lt  option gt     lt option value  option-3  gt Option 3 lt  option gt   lt  select gt    SCSS  body     padding  4em 40     text-align  center     select      bg-color  lightcyan     text-color  black    appearance  none     Using -prefix-free http   leaverou github io prefixfree    background        color   bg-color      image  url  https   s3-us-west-2 amazonaws com s cdpn io 1255 caret--down-15 png        position  right      repeat  no-repeat        border        color  mix  bg-color  black  80        radius   2em      style  solid      width  1px      right-color  mix  bg-color  black  60        bottom-color  mix  bg-color  black  60          color   text-color    padding   33em  5em    width  100         Removes default arrow for Internet Explorer 10  and later     Internet Explorer 8 9 gets the default arrow which covers the caret    image as long as the caret image is smaller than and positioned    behind the default arrow select  -ms-expand       display  none      CodePen  http   codepen io ralgh pen gpgbGx

User · Answer

It is possible  but unfortunately mostly in WebKit-based browsers to the extent we  as developers  require  Here is the example of CSS styling gathered from Chrome options panel via built-in developer tools inspector  improved to match currently supported CSS properties in most modern browsers   select       -webkit-appearance  button      -moz-appearance  button      -webkit-user-select  none      -moz-user-select  none      -webkit-padding-end  20px      -moz-padding-end  20px      -webkit-padding-start  2px      -moz-padding-start  2px      background-color   F07575     Fallback color if gradients are not supported        background-image  url    images select-arrow png   -webkit-linear-gradient top   E5E5E5   F4F4F4      For Chrome and Safari        background-image  url    images select-arrow png   -moz-linear-gradient top   E5E5E5   F4F4F4      For old Firefox  3 6 to 15         background-image  url    images select-arrow png   -ms-linear-gradient top   E5E5E5   F4F4F4      For pre-releases of Internet Explorer  10       background-image  url    images select-arrow png   -o-linear-gradient top   E5E5E5   F4F4F4      For old Opera  11 1 to 12 0         background-image  url    images select-arrow png   linear-gradient to bottom   E5E5E5   F4F4F4      Standard syntax  must be last        background-position  center right      background-repeat  no-repeat      border  1px solid  AAA      border-radius  2px      box-shadow  0px 1px 3px rgba 0  0  0  0 1       color   555      font-size  inherit      margin  0      overflow  hidden      padding-top  2px      padding-bottom  2px      text-overflow  ellipsis      white-space  nowrap      When you run this code on any page within a WebKit-based browser it should change the appearance of the select box  remove standard OS-arrow and add a PNG-arrow  put some spacing before and after the label  almost anything you want   The most important part is appearance property  which changes how the element behaves   It works perfectly in almost all WebKit-based browser  including mobile ones  though Gecko doesn t support appearance as well as WebKit  it seems

User · Answer

You can also add a hover style to the dropdown    x000D   x000D  select  position relative  float left  width 21 4   height 34px  background  f9f9e0  border 1px solid  41533f  padding 0px 10px 0px 10px  color  41533f  margin -10px 0px 0px 20px  background  transparent  font-size  12px  -webkit-appearance  none  -moz-appearance  none  appearance  none  background  url https   alt-fit com images global select-button png  100    15  no-repeat  f9f9e0   x000D  select hover  background  url https   alt-fit com images global select-button png  100    15  no-repeat  fff   x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt select name  type  class  select  gt  lt option style  color  41533f   value  Select option  gt Select option lt  option gt  x000D   lt option value  Option 1  gt Option 1 lt  option gt  x000D   lt option value  Option 2  gt Option 2 lt  option gt  x000D   lt option value  Option 3  gt Option 3 lt  option gt  x000D   lt  select gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Edit this element is not recommended  but if you want to try it s like any other HTML element   Edit example      Edit select    select          CSS style here          Edit option    option          CSS style here          Edit selected option       element  attr    attr value    option selected  selected            CSS style here         lt select gt       lt option  gt Something  1 lt  option gt       lt option selected  selected  gt Something  2 lt  option gt       lt option  gt Something  3 lt  option gt   lt  select gt

User · Answer

Yes   You may style any HTML element by its tag name  like this   select     font-weight  bold      Of course  you can also use a CSS class to style it  like any other element    lt select class  important  gt     lt option gt Important Option lt  option gt     lt option gt Another Important Option lt  option gt   lt  select gt    lt style type  text css  gt     important       font-weight  bold       lt  style gt

User · Answer

label       position  relative      display  inline-block    select       display  inline-block      padding  4px 3px 5px 5px      width  150px      outline  none      color  black      border  1px solid  C8BFC4      border-radius  4px      box-shadow  inset 1px 1px 2px  ddd8dc      background-color  lightblue      This uses a background color for select elements and I removed the image

User · Answer

The select element and its dropdown feature are difficult to style   style attributes for select element by Chris Heilmann confirms what Ryan Dohery said in a comment to the first answer       The select element is part of the    operating system  not the browser chrome  Therefore  it is very    unreliable to style  and it does not necessarily make sense to try    anyway

User · Answer

The third method in Danield s answer can be improved to work 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    lt select class  select-input  gt     lt  select gt   lt div class  select-button  gt  lt  div gt    CSS    select-input hover  select-button        lt Hover styles here gt      This will  however  show the hover effect when hovering anywhere over the select-element  not just over the  button    I m using this method in combination with Angular  since my project happens to be an Angular application anyway   to cover the whole select-element  and let Angular display the text of the selected option in the  button -element  In this case it makes perfect sense that the hover-effect applies when hovering anywhere over the select   It doesn t work without JavaScript though  so if you want to do this  and your site has to work without JavaScript  you should make sure that your script adds the elements and classes necessary for the enhancement  That way  a browser without JavaScript will simply get a normal  unstyled  select  instead of a styled badge that doesn t update correctly

User · Answer

I got to your case using Bootstrap  This is the simplest solution that works    x000D   x000D  select form-control   x000D      -moz-appearance  none  x000D      -webkit-appearance  none  x000D      appearance  none  x000D      background-position  right center  x000D      background-repeat  no-repeat  x000D      background-size  1ex  x000D      background-origin  content-box  x000D      background-image  url  data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8 CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4 PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c Cjwvc3ZnPgo     x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet    gt  x000D   lt section class  container  gt  x000D     lt form class  form-horizontal  gt  x000D       lt select class  form-control  gt  x000D         lt option gt One lt  option gt  x000D         lt option gt Two lt  option gt  x000D       lt  select gt  x000D     lt  form gt  x000D   lt  section gt  x000D   x000D   x000D    Note  the base64 stuff is fa-chevron-down in SVG

User · Answer

A native solution Check this fiddle  and forgive me the overstyling  https   jsfiddle net dkellner 7ac9us70   You already know all the elements You can style them the usual way Very little JS involved   The trick behind  as soon as the  lt select gt  tag gets a property called  quot size quot   it will behave as a fixed-height list  and  suddenly  for some reason  allows you to style the hell out of it  Now strictly speaking  the fixed list is a side effect - but it just helps us more because we use it for the  quot dropped-down look quot   A minimal example   lt style gt        stylish span    position relative        stylish select  position absolute left 0px display none    lt  style gt       lt div class  quot stylish quot  gt       lt label gt  Choose your superhero   lt  label gt       lt span gt           lt input onclick  quot   this  closest  div   find  select   slideToggle 110  quot  gt  lt br gt           lt select size 15 onclick  quot   this  hide   closest  div   find  input   val   this  find  option selected   text     quot  gt                lt optgroup label  quot Fantasy quot  gt  lt  optgroup gt               lt option value  quot 1 quot  gt   Gandalf         lt  option gt               lt option value  quot 2 quot  gt   Harry Potter    lt  option gt               lt option value  quot 3 quot  gt   Jon Snow        lt  option gt                lt  --     and so on -- gt            lt  select gt       lt  span gt   lt  div gt    to keep it simple I did it with jQuery - but you can do the same without it   Side notes  This solution gives you more than just a select  the value is also manually editable  Use the readonly property if you prefer the default select-restricted way   To maximize styling possibilities   lt optgroup gt  tags are not around their children  they re moved before them  It s intentional  it s visually clearer  and they re happy to work like this  don t worry   Javascripts  yes I know the OP said  quot no Javascript quot  but I understood it as  please don t bother with plugins  which is fine  You don t need any libraries for this one  Not even jQuery  as I said  it s only for the clarity of the example

[html] How do I style a <select> dropdown with only CSS?

Examples related to html

Examples related to css

Examples related to combobox

Examples related to cross-browser

Examples related to skinning