如何用CSS設(shè)置下拉列表sel_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
我們在進(jìn)行CSS網(wǎng)頁布局的時候,經(jīng)常會碰到下拉列表select,我們可以應(yīng)用CSS對表單的元素進(jìn)行控制,可是下拉列表select的樣式該如何設(shè)置呢?
我們來看看下面的xhtml代碼,這是一個典型的下拉列表select:
示例代碼 [m.dounai2.com]
<select>
<option>模板無憂</option>
<option>Div CSS教程</option>
<option>CSS布局實例</option>
<option>CSS2.0教程</option>
<option>CSS在線手冊</option>
<option>Web標(biāo)準(zhǔn)</option>
<option>XHTML教程</option>
</select>
<option>模板無憂</option>
<option>Div CSS教程</option>
<option>CSS布局實例</option>
<option>CSS2.0教程</option>
<option>CSS在線手冊</option>
<option>Web標(biāo)準(zhǔn)</option>
<option>XHTML教程</option>
</select>
我們再來看看控制它的CSS代碼:
示例代碼 [m.dounai2.com]
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;
}
我們再來看看運行的效果吧:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運行查看效果 ]
或許您對此依然不滿足,我們對此也無能為力,更多的方法是用js來進(jìn)行控制和修改它的外表,在select外觀上沒給用戶多少“自由”。mb5u.com是關(guān)于css的專題網(wǎng)站,我們就不深入學(xué)習(xí)js的控制是如何工作的了。我們沒有更多的css方法來改變它。當(dāng)然,你可以通過改變滾動條背景顏色等將其進(jìn)行更深的美化,但下拉列表的小三角是CSS所不能控制得了的。
不久的將來,或許將有更多更美妙的辦法來控制下拉列表select,歡迎您關(guān)注我們的網(wǎng)站:模板無憂-m.dounai2.com
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-如何用CSS設(shè)置下拉列表sel。