如何在HTML和CSS中更改下拉框背景以及箭头？

Question

I need to change the background of the drop down box

<select>
   <option value="Chrome">Google Chrome</option>
   <option value="Fire Fox">Fire Fox</option>
   <option value="Opera">Opera</option>
  </select>

1)Below is the CSS 2)i can give background but it will be display like below link http://jsfiddle.net/vamsivelaga/9bt5vncg/

select{
    float: left;
    width: 100px;
    height: 26px;
    border: 1px solid #d4d4d4;
    margin: 10px 0 0 10px;
    text-overflow: '';
    background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;}

Answer 1

If you want to change the color of the background, just add some color at the end of "background".

For example .drop_down_style{ background: url( http://s24.postimg.org/lyhytocf5/dropdown.png ) no-repeat right #000; }

The above code adds black color and replaces the default image with the url which is provided.

You can refer to this link if needed.