HTML 选择下拉箭头样式

Question

如何使选择下拉箭头的样式如下图所示。

<select>
    <option>Select Any</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Answer 1

试试这个:

HTML:

<div class="styled-select slate">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

CSS:

div { margin: 20px; }

.styled-select {
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.slate {
   background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;
   height: 34px;
   width: 240px;
}