请先访问此链接：http://jsfiddle.net/UWNtK/
这是一个包含多个选项的<select>标记。我在这里得到了这个教程的启发：http://bavotasan.com/2011/style-select-box-using-only-css/
现在我需要将所有选项包装在div下，这样就会有一个垂直滚动条（在category1的情况下）。 如何获得这个输出？
我正在使用这个Html：
<div class="drop1">
<select>
<option value="categ1">Category1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="drop2">
<select>
<option value="categ2">Category2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
和CSS：
.drop1, .drop2 {
float: left;
width: 180px;
height: 34px;
overflow: hidden;
background: url(images/dropdwn.png) no-repeat right #ccc;
border-radius: 4px;
border:1px solid #000;
box-shadow: 0 1px 3px #f00;
font-size:14px;
margin:0 10px;
}
.drop1 select, .drop2 select {
background: transparent;
width: 215px;
padding: 5px;
font-size: 14px;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #f00;
cursor: pointer;
}
.drop1 option, .drop2 option {
text-align: center;
margin: 0 auto;
color: #000;
cursor: pointer;
}
感谢。