使用CSS，使按钮出现在浏览器/ WebKit浏览器选择下拉菜单上

所以我有一个简单的下拉菜单中的HTML这样的：使用CSS，使按钮出现在浏览器/ WebKit浏览器选择下拉菜单上

<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中，与右侧的按钮，只是一个单一的像素边框沿底部？

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

来源

2013-03-12 Jimmery

您可以使用所有边框白色，但底部与其他颜色适当的下拉菜单。检查这个小提琴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-12 11:13:26 crazyrohila

但是这使得边框周围出现整个下拉菜单... – Jimmery 2013-03-12 11:25:13

我使用这个，在边境是零。 .menu {font-size：10px; font-size：10px; font-family：Arial，sans-serif; padding-top：2px; 位置：相对; bottom：2px; 概要：无; width：200px; border：0; 外观：menulist-button; }检查这个小提琴http://jsfiddle.net/LGwEd/1/ – crazyrohila 2013-03-12 11:36:53

好的，这使得按钮出现在右边，而不是沿底部的单个1px边框。有没有什么办法让两者都出现在Chrome中？ – Jimmery 2013-03-12 11:41:58

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

，这使得它使用为我工作：铬25.0和Safari：6.0.2

来源

2013-03-12 11:09:24

但是这使得边框周围出现整个下拉菜单... – Jimmery 2013-03-12 11:26:02

使用CSS，使按钮出现在浏览器/ WebKit浏览器选择下拉菜单上

回答

相关问题