css - 使用 CSS 使按钮出现在 Chrome/Webkit 浏览器中的“选择下拉”菜单上

Question

所以我有一个简单的 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 边框呈现 沿着底部，但右侧没有按钮。

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

这里有一个 jsFiddle，你可以自己看看:http://jsfiddle.net/tkFpe/3/

Answer 1

您可以使用全白色边框，但底部使用其他颜色，以获得正确的下拉菜单。检查这个 fiddle 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; 
}