如何用CSS設置下拉列表sel_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
我們在進行CSS網頁布局的時候，經常會碰到下拉列表select，我們可以應用CSS對表單的元素進行控制，可是下拉列表select的樣式該如何設置呢？
我們來看看下面的xhtml代碼，這是一個典型的下拉列表select：
示例代碼 [www.hl5o.cn]
<select>
<option>模板無憂</option>
<option>Div CSS教程</option>
<option>CSS布局實例</option>
<option>CSS2.0教程</option>
<option>CSS在線手冊</option>
<option>Web標準</option>
<option>XHTML教程</option>
</select>
<option>模板無憂</option>
<option>Div CSS教程</option>
<option>CSS布局實例</option>
<option>CSS2.0教程</option>
<option>CSS在線手冊</option>
<option>Web標準</option>
<option>XHTML教程</option>
</select>
我們再來看看控制它的CSS代碼：
示例代碼 [www.hl5o.cn]
div {
border:1px solid #C0C0C0;
width:183px;
height:18px;
clip:rect(0px,18px,22px,0px);
overflow:hidden;
}
select {
position:relative;
left:-2px;
top:-2px;
font-size:12px;
width:185px;
line-height:18px;border:0px;
color:#909993;
}
border:1px solid #C0C0C0;
width:183px;
height:18px;
clip:rect(0px,18px,22px,0px);
overflow:hidden;
}
select {
position:relative;
left:-2px;
top:-2px;
font-size:12px;
width:185px;
line-height:18px;border:0px;
color:#909993;
}
我們再來看看運行的效果吧：
代碼調試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
或許您對此依然不滿足，我們對此也無能為力，更多的方法是用js來進行控制和修改它的外表，在select外觀上沒給用戶多少“自由”。mb5u.com是關于css的專題網站，我們就不深入學習js的控制是如何工作的了。我們沒有更多的css方法來改變它。當然，你可以通過改變滾動條背景顏色等將其進行更深的美化，但下拉列表的小三角是CSS所不能控制得了的。
不久的將來，或許將有更多更美妙的辦法來控制下拉列表select，歡迎您關注我們的網站:模板無憂-www.hl5o.cn
相關Div+CSS教程：
- 相關鏈接：
- 教程說明：
Div+CSS教程-如何用CSS設置下拉列表sel
。