How do I change the select box arrow

Question

I need your help   I can t seem to wrap my head around this one and figure it out  How do I change the default Windows 7  IE 10 default arrow in the select box  to make it look like this  using the custom arrow below    Here is the arrow that I desire to use   Here is my HTML markup    lt  DOCTYPE html gt   lt html gt   lt head gt      lt style type  text css  gt     select   font  normal 13px Arial  color   000       container            border  1px solid red           position  relative  width  124px  height  18px  overflow  hidden            inpSelect           color  black  background   ffa          position  absolute  width  128px  top  -2px  left  -2px            lt  style gt    lt script type  text javascript  gt   lt  script gt    lt  head gt    lt body gt    lt div class  container  gt       lt select class  inpSelect  name  xxx  gt           lt option value  0  selected  selected  gt actual browser lt  option gt           lt option value  1  gt IE lt  option gt           lt option value  2  gt Firefox lt  option gt           lt option value  3  gt Opera lt  option gt           lt option value  4  gt Safari lt  option gt       lt  select gt   lt  div gt   lt  body gt    lt  html gt

User · Answer

CSS  select inpSelect       Remove original arrows   -webkit-appearance  none       Use png at assets selectArrow png for the arrow on the right     Set the background color to a BadAss Green color    background  url assets selectArrow png  no-repeat right  BADA55

User · Answer

Working with just one selector   select       width  268px      padding  5px      font-size  16px      line-height  1      border  0      border-radius  5px      height  34px      background  url http   cdn1 iconfinder com data icons cc mono icon set blacks 16x16 br down png  no-repeat right  ddd      -webkit-appearance  none      background-position-x  244px      fiddler

User · Answer

You can skip the container or background image with pure css arrow   select         make arrow and background       background      linear-gradient 45deg  transparent 50   blue 50        linear-gradient 135deg  blue 50   transparent 50        linear-gradient to right  skyblue  skyblue     background-position      calc 100  - 21px  calc 1em   2px       calc 100  - 16px  calc 1em   2px       100  0    background-size      5px 5px      5px 5px      2 5em 2 5em    background-repeat  no-repeat        styling and reset       border  thin solid blue    font  300 1em 100   Helvetica Neue   Arial  sans-serif    line-height  1 5em    padding  0 5em 3 5em 0 5em 1em        reset       border-radius  0    margin  0          -webkit-box-sizing  border-box    -moz-box-sizing  border-box    box-sizing  border-box    -webkit-appearance none    -moz-appearance none      Sample here

[html] How do I change the select box arrow

Examples related to html

Examples related to css

Examples related to select