如何用CSS設(shè)置下拉列表sel_Div+CSS教程

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

　　
　　我們?cè)谶M(jìn)行CSS網(wǎng)頁(yè)布局的時(shí)候，經(jīng)常會(huì)碰到下拉列表select，我們可以應(yīng)用CSS對(duì)表單的元素進(jìn)行控制，可是下拉列表select的樣式該如何設(shè)置呢？

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

示例代碼 [hl5o.cn]

<select>
<option>模板無憂</option>
<option>Div CSS教程</option>
<option>CSS布局實(shí)例</option>
<option>CSS2.0教程</option>
<option>CSS在線手冊(cè)</option>
<option>Web標(biāo)準(zhǔn)</option>
<option>XHTML教程</option>
</select>

　　我們?cè)賮砜纯纯刂扑腃SS代碼：

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

　　我們?cè)賮砜纯催\(yùn)行的效果吧：

代碼調(diào)試框 [hl5o.cn]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

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