Question

好吧所以在ie8它看起来很好但是我不能让它看起来正确，即7。

下面的样式是select div，select元素本身。我怎样才能让它看起来像是图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;

Answer 1

不幸的是，还没有一种跨浏览器兼容的样式表单元素与CSS的路径：通常不会让设计师控制它们的外观/行为，因此表单元素非常难以设计。许多浏览器根本不允许你设置它们的样式！

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

这篇文章列出了一些可供选择的选项：http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

如何使用我自己的图像替换ie7中的select元素的箭头

1 个答案: