Question

我的输出代码是： -

<!DOCTYPE html>
<html>
<style>

#one
{
margin-left:150px;
}

</style>
<body>
<select id="one">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

此代码是下拉框的jest输出但现在我认为在下拉列表中添加图像，如下面的图像 enter image description here

我想更改下拉列表箭头的默认外观，以便在所有浏览器中都能正常运行。

Answer 1

尝试下面的Css ....

select#one {
    -moz-appearance: none;
    background: url("../images/select_arrow.png");
    text-indent: 0.01px;
    text-overflow: "";
}

Answer 2

使用css属性（仅适用于现代浏览器）：

.dropdown {
    background: url(path/to/image) top right no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

对于IE：

select::-ms-expand { display: none; }

关注this small tutorial。

如何在下拉按钮上添加图像

2 个答案: