風格的HTML選擇列表

得到了一個不錯的菜單與圓角按鈕，我想樣式下拉列表相同的方式。嘗試了很多不同的東西，但有兩件事我需要一些幫助：
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; 
}

來源

2013-12-15 Christoffer Jacobsen

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

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

你不能做到這一點。你必須建立你自己的select元素。

檢查：http://css-tricks.com/dropdown-default-styling/

來源

2013-12-15 23:00:22

退房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; 
    }

來源

2013-12-15 23:25:27

風格的HTML選擇列表

回答

相關問題