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

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

　　
　　我们在进行CSS网页布局的时候，经常会碰到下拉列表select，我们可以应用CSS对表单的元素进行控制，可是下拉列表select的样式该如何设置呢？

　　我们来看看下面的xhtml代码，这是一个典型的下拉列表select：
　

示例代码 [www.mb5u.com]

<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.mb5u.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;
}

　　我们再来看看运行的效果吧：

代码调试框 [www.mb5u.com]

[ 可先修改部分代码再运行查看效果 ]

　　或许您对此依然不满足，我们对此也无能为力，更多的方法是用js来进行控制和修改它的外表，在select外观上没给用户多少“自由”。mb5u.com是关于css的专题网站，我们就不深入学习js的控制是如何工作的了。我们没有更多的css方法来改变它。当然，你可以通过改变滚动条背景颜色等将其进行更深的美化，但下拉列表的小三角是CSS所不能控制得了的。
　　不久的将来，或许将有更多更美妙的办法来控制下拉列表select，欢迎您关注我们的网站:模板无忧-www.mb5u.com
　　