css - css上的自定义图像

Question

我正在尝试仅使用 css 设置我的 css 下拉框的样式...首先，我的下拉列表中有自定义的 html 向下箭头，我试图在我的 css 上放置一个图像以将此默认箭头向下，这样我就可以放置我自己的图像对它，但我不知道该怎么做......

这是我的下拉框的CSS：

select {
    height:32px;
    line-height:42px;
    width: 88%;
}

如何将自己的图像放入此代码？我也尝试了以下教程，但它对我没有用，我无法让它正常工作......

http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 1

该教程非常适合我。

我创造了一个小提琴让你理解，但你必须明白作者想说什么。

HTML 代码

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

CSS 代码

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url('http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg') no-repeat right #ddd;
   border: 1px solid #ccc;
}

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}

http://jsfiddle.net/zNCBY/