如何樣式選擇及其選項元素和添加轉換？

最近我一直在試圖用css編寫<select>和<option>。但是我不能添加transitions.Need一些想法如何設計它。在此先感謝...如何樣式選擇及其選項元素和添加轉換？

這裏是我的HTML

<nav class="mobile"> 
    <span class="logo"><h1><a href="#">Site Logo</a></h1></span> 
    <select> 
     <option>Menu</option> 
     <option><a href="#">Home</a></option> 
     <option><a href="#">Tutorials</a></option> 
     <option><a href="#">Freebies</a></option> 
     <option><a href="#">Contact</a></option> 
     <option><a href="#">About Me</a></option> 
    </select> 
</nav>

來源

2013-10-23 Hiren Chauhan

顯示您在造型上的嘗試。 – tymeJV

你想添加什麼樣的轉換？ –

我想添加一些轉換，比如打開菜單，逐個增加其不透明度。我試圖添加背景漸變選項，但它支持簡單的顏色漸變背景。 –

參考，此鏈接：http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

希望這個插件可以幫助

來源

2013-10-23 14:20:33 N20084753

這是一個非常漂亮的選擇下拉菜單。 –

尋找那樣的東西。這很好，我會盡力使它真棒。 –

下面是如何添加樣式選擇標記，屬於過渡，你在找什麼類型的轉換呢？

你可以做select {}，nav > select {},nav select {},.mobile select {}或許多其他方式來定位它。

.mobile > select { 
    width: 190px; 
    height: 20px; 
    box-shadow: 0 1px 2px #2b2b2b; 
    background: #eee; 
    color: #0c5b78; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    border-radius: 3px 0 0 3px; 
    margin-bottom: 5px; 
    margin-right: 10px; 
    float: left; 
}

關於刪除select的默認樣式和使用它們的更好的想法。

CSS-Tricks

來源

2013-10-23 14:19:31

使用jQuery風格<select>或<option>很容易，看看這個

selectBoxIt

來源

2013-10-23 14:19:57

這是一個非常不錯的小包裝，但是，自己製作它會更好嗎？ –

@JoshPowell Ofcourse :) –