風格選擇菜單

是否有可能風格<選擇>菜單中像下面的圖片：風格選擇菜單

a select menu

這裏是我一直在努力，但無法獲得正確的箭頭提琴。

下面是HTML：

<select> 
    <option>Alabama</option> 
    <option>Alaska</option> 
</select>

這裏是CSS：

select { 
background: -webkit-linear-gradient(#C9C9C9, #CCC); 
background: -moz-linear-gradient(#C9C9C9, #CCC); 
border: 1px solid #ccc; 
color: white; 
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);  
-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none; 
padding:10px; 
}

是否有可能風格<選擇>菜單也是這樣嗎？

來源

2013-01-10 Mdd

我不明白，你能進一步闡述一下嗎？選擇菜單的框與箭頭分開......你是什麼意思分開的？ –

我用圖像編輯了這個問題，希望更清楚。 – Mdd

我想你想要這樣的東西：http://bavotasan.com/2011/style-select-box-using-only-css/ – drneel

你需要做的基本上是浮動他們左，明確自己的權利的如下

select { float:left; clear:right; } 
div { float:left; clear:right; }

方式這將推動他們併攏。您也不應該在選擇框旁邊使用<p>標籤。把箭頭放在一個div裏，而不是沒有理由不這樣做，當你浮動它們的時候它也會刪除這個空間。這樣做只是簡單的編碼。

來源

2013-01-10 01:01:58 Epik

對不起，這不是我想弄明白的。 II更新了這個問題，併爲我一直在努力完成的事情提供了一張圖片，對於我最初發布的不清楚的問題，我表示歉意。我發現網上有很多關於試圖選擇菜單的樣式，但是沒有什麼幫助我。感謝您的幫助。 – Mdd

您可以添加到您的CSS：

width: auto; 
background: url('http://cdn1.iconfinder.com/data/icons/picol/icons/arrow_sans_down_32.png') no-repeat right;

這應該做的伎倆。

演示：

來源

2013-01-10 07:21:39

風格選擇菜單

回答

相關問題