Html 如何使用自己的图像替换ie7中选择元素的箭头

好的，所以在ie8中看起来不错，但是我不能让它在IE7中看起来正确

下面的样式是select div，即select元素本身。我怎样才能使它看起来像ie 8，在那里可以看到图像而不是记号

挑选 抱怨

select {
border: 1px solid #D1DEE8;
width: 333px;
padding: 0 40px 0 10px;
font-size: 12px;
color: #666;
line-height: 15px;
-webkit-appearance: none;
-webkit-box-shadow: 1px 1px 1px #fff;
-webkit-border-radius: 0.5em;
-moz-appearance: none;
-moz-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 0.5em;
background: #fff url(../images/selectDrop.png) no-repeat right center;
height: 33px;

.styled-select select {
background: rgba(0,0,0,0);
background: transparent;
width: 110%;
border: 0;
height: 32px;
float: left;
color: #666;
padding-top: 3px;

.styled-select {
overflow: hidden;
float: left;
background: url(../images/DownArrow.png) white no-repeat 173px center;
border: 1px solid #ccc;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;

---

不幸的是，目前还没有一种跨浏览器兼容的CSS表单元素样式设计方法：通常不会让设计师控制表单元素的外观/行为，因此表单元素的样式设计是出了名的困难。许多浏览器根本不允许您设置它们的样式

如果您需要在所有浏览器中获得一致的外观，唯一的途径是使用JavaScript将视图中的表单元素替换为样式化的HTML元素

这里有一篇文章列出了一些可供选择的选项：