Style a Select Box Using Only CSS

From: http://bavotasan.com/2011/style-select-box-using-only-css/

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

div 包在 select 標籤外

Css select 如何指定 width 寬度

在這篇文章Controlling the width of SELECT lists中建議,要讓select標籤指定特定寬度,最好在標籤屬性和CSS屬性的width同時指定以達到通用性。

  • Using a WIDTH attribute on the SELECT control
  • CSS on the SELECT control

Example

<select name="foo" width="300" style="width: 300px">
    <option>one </option>
    <option>two </option>
    <option>three </option>
</select>