2013-12-15 75 views
0

得到了一個不錯的菜單與圓角按鈕,我想樣式下拉列表相同的方式。嘗試了很多不同的東西,但有兩件事我需要一些幫助:
1.像其他按鈕一樣的圓角。
2.得到一個純色,而不是動畫的樣子。風格的HTML選擇列表

下面是該按鈕和下拉菜單圖片:

以下是名單上的造型:

#topNav .right #categoryButton { 
    margin-top:5px; 
    border:3px solid #fff; 
    background-color:#303030 ; 
    text-transform:uppercase; 
    color: #fff; 
    height:50px; 
    width:220px; 
    outline: none; 
} 
+0

也許這個問題(和它的答案)也是你正在尋找/都希望不要找到答案:HTTP:/ /stackoverflow.com/questions/5689389/styling-html-select-element – Floris

+0

要回答這個問題,你必須知道哪些瀏覽器被支持。 –

回答

2

退房this great article約一個樣式下拉列表中選擇。但是有一些限制,一些較舊的瀏覽器會以自己的方式渲染選擇框。

它主要涉及包裝選擇在一個div和樣式的DIV:

<div class="styled-select"> 
     <select> 
      <option>Here is the first option</option> 
      <option>The second option</option> 
     </select> 
    </div> 

.styled-select select { 
    background: transparent; 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    } 

.styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: url(new_arrow.png) no-repeat right #ddd; 
    border: 1px solid #ccc; 
    }