使用 CSS 使按钮出现在 Chrome / Webkit 浏览器中的选择下拉菜单上答案

【问题标题】：Using CSS to make button appear on Select Drop Down menu in Chrome / Webkit Browsers使用 CSS 使按钮出现在 Chrome / Webkit 浏览器中的选择下拉菜单上
【发布时间】：2013-03-12 10:34:06
【问题描述】：

所以我在 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 中呈现我想要的效果 - 下拉菜单仅在底部有一个 1 像素的边框，并且在右侧有下拉菜单按钮（带有小向下箭头的灰色按钮）。

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

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

如果没有此规则，下拉菜单会在其周围呈现一个框，并且右侧的按钮。
使用此规则，下拉菜单仅使用 1px 边框呈现沿着底部，但右侧没有按钮。

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

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

【问题讨论】：

标签： css google-chrome button drop-down-menu webkit

【解决方案1】：

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

【讨论】：

我正在使用它，其中边框为零。 .menu { 字体大小：10px;字体系列：Arial，无衬线；填充顶部：2px；位置：相对；底部：2px；大纲：无；宽度：200px；边界：0；外观：菜单列表按钮； } 检查这个小提琴jsfiddle.net/LGwEd/1
好的，这使按钮显示在右侧，而不是底部的单个 1px 边框。有什么办法让两者都出现在 Chrome 中？
试试这个：codepen.io/anon/pen/yfLuG 你会注意到所有东西都没有边框，只有底部，但是 chrome 和 safari 中的轮廓使它看起来好像周围都有边框
是的，和 fizzy 一样，不确定是否可以删除轮廓。但是您可以在其他方面使用白色边框来破解（或伪造）它。检查这个小提琴jsfiddle.net/LGwEd/3。
感谢吉默里！我更新了答案。这是我在 stackoverflow 上的第一天。

【解决方案2】：

去掉-webkit部分，只使用border: 0和appearance: button；

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

【讨论】：