如何用CSS設置下拉列表sel_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　我們在進行CSS網頁布局的時候，經常會碰到下拉列表select，我們可以應用CSS對表單的元素進行控制，可是下拉列表select的樣式該如何設置呢？

　　我們來看看下面的xhtml代碼，這是一個典型的下拉列表select：
　

示例代碼 [www.zhaotila.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>

　　我們再來看看控制它的CSS代碼：

示例代碼 [www.zhaotila.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;
}

　　我們再來看看運行的效果吧：

代碼調試框 [www.zhaotila.cn]

[ 可先修改部分代碼再運行查看效果 ]

　　或許您對此依然不滿足，我們對此也無能為力，更多的方法是用js來進行控制和修改它的外表，在select外觀上沒給用戶多少“自由”。mb5u.com是關于css的專題網站，我們就不深入學習js的控制是如何工作的了。我們沒有更多的css方法來改變它。當然，你可以通過改變滾動條背景顏色等將其進行更深的美化，但下拉列表的小三角是CSS所不能控制得了的。
　　不久的將來，或許將有更多更美妙的辦法來控制下拉列表select，歡迎您關注我們的網站:模板無憂-www.zhaotila.cn
　　