2

所以我在 HTML 中有一个简单的下拉菜单，如下所示：

<select name="menu" class="menu">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

我用这个 CSS 设计它：

.menu {
    font-size: 10px;
    font-family: Arial, sans-serif;
    padding-top: 2px;
    position: relative;
    bottom: 2px;
    outline: none;
    border-bottom-width: 1px !important;
    border-top-style: none !important;
    border-right-style: none !important;
    border-bottom-style: solid !important;
    border-left-style: none !important;
    border-bottom-color: #999 !important;
    width:200px;
    -webkit-border:0;
    -webkit-appearance: button;
}

这在 Firefox 和 Internet Explorer 中呈现我想要的效果 - 下拉菜单仅在底部有一个 1px 的边框，并且在右侧有下拉菜单按钮（带有小向下箭头的灰色按钮）。

但在 Chrome 或其他 WebKit 浏览器（如 Safari）中，该按钮不会出现。

我一直在-webkit-appearance玩弄规则，玩弄在这里找到的属性http://css-infos.net/property/-webkit-appearance但收效甚微。

  • 如果没有此规则，下拉菜单会在其周围呈现一个框，并在右侧显示按钮。

  • 使用此规则，下拉菜单仅在底部呈现 1px 边框，但右侧没有按钮。

我的问题是，如何让这个下拉菜单像在 Firefox 中一样在 Chrome 中呈现，按钮在右侧，底部只有一个 1px 边框？

这是一个 jsFiddle，您可以自己查看：http: //jsfiddle.net/tkFpe/3/

4

2 回答 2

3

您可以使用所有白色的边框，但底部有其他颜色的正确下拉菜单。检查这个小提琴jsfiddle.net/LGwEd/3。

.menu { 
    font-size: 10px; 
    font-family: Arial, sans-serif; 
    padding-top: 2px; 
    position: relative; 
    bottom: 2px; 
    outline: none; 
    width:200px; 
    border:0; 
    appearance: menulist-button; 
}
于 2013-03-12T11:13:26.493 回答
0

删除 -webkit 部分，只使用边框：0 和外观：按钮；

这使它对我有用：Chrome 25.0 和 Safari：6.0.2

于 2013-03-12T11:09:24.800 回答