css上的自定义图像

我正在尝试样式我的css下拉框只使用css。。。 首先，我的下拉菜单中有自定义html箭头，我正在尝试在css上放置一个图像，以使这个默认箭头向下，这样我就可以将自己的图像放到它上面，但我不知道如何做

这是我的下拉框css：

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

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

---

这本教程对我很有用

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

HTML代码

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

---

和HTML？它在哪里？我怎么让它看起来有88%的宽度？嘿，当我点击下拉列表时，选择比框大。我如何使其与框相似？请回答我为什么下拉列表比框大？让我10分钟来了解你的解决方案。我已经得到了：）我只需编辑“.styled select select”的第二行。非常感谢

.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;
}