使用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瀏覽器選擇下拉菜單上

回答

相關問題