8

我一直在尝试摆脱网站中的默认渐变背景。我知道如果我设置 -webkit-appereance:none 这将是可能的，但是我会失去我想要的下拉菜单中的箭头和其他行为。有没有用 -webkit-appearance: menulist 将背景设置为白色？

这就是我所拥有的，但背景没有改变

.ius select{
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    height:32px;
    border:1px solid #c8c8c8;
    width:250px;
    background:rgba(255, 255, 255, 0);
    background: transparent;
}
4

1 回答 1

5

外观属性通常用于两件事：

  1. 模仿其他元素的原生样式
  2. 或删除所有原生样式（将外观设置为无）

这是一个非常奇怪的属性。

由于要删除本机默认背景，因此需要将外观设置为无。这将删除所有样式（渐变和默认箭头图标）。然而，这没什么大不了的，因为您可以使用 css 对其应用更多样式。

使用标记：

<select id="menulist">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

和 CSS：

#menulist {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:20px;
    border:1px solid rgb(156,156,156);
    width:250px;
    text-indent: 8px;
    /**
    * replace this background url with a proper arrow asset
    **/
    background: url('http://placehold.it/5x10') no-repeat 95% 50%;
}

完整的 jsfiddle 可在此处获得：http: //jsfiddle.net/gwwar/vR53Q/2/

由于此属性仅在 Chrome、Safari 和 Firefox 上受支持，我可能会采用不同的方式，要么使用本机选择样式，要么使用您可以完全控制的下拉组件。

于 2013-08-03T23:49:18.163 回答