HTML里select的CSS样式的改变

本以为可以很简单的在CSS里像input那样的给解决，结果没想到试了一下才知道常规的CSS根本没法改变的select样式，CSS里怎么弄，select都仍然是默认的那三维的样式。于是在网上搜索了一下，才知道，原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题，于是找了一篇不错的文章转过来，希望对大家有帮助————

首先要告诉大家，如果你是用css的方法，除了箭头部分，其他都可以改变，这是很令人别扭的事，因为其他的样式改了，箭头部分改不了等于无用。
下面举个css改select的例子
</p> <p>.box{border:1px solid<br /> #C0C0C0;width:182px;height:19px;clip:rect(0px,181px,18px,0px);overflow:hidden;}<br /> .box2{border:1px solid<br /> #F4F4F4;width:180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;}<br /> select{position:relative;left:-2px;top:-2px;font-size:12px;width:183px;line-height:14px;bo<br /> rder:0px;color:#909993;} </p> <p>网站的封面<br /> 上海夏天(一一友情提供)<br /> 上海夏天(一)<br /> 上海夏天出版了<br /> 在雨中(二)<br /> 开往黎明的地铁(二)<br /> 开往黎明的地铁<br /> 亲爱的你们在干什么<br /> 更多封面…… </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
如果你想彻底的改变select的样子，有一种方法是用htc，但它有个缺点就是除了ie内核的，其他的他不支持。
举个例子，下载地址如下： 下载此文件
第二种方法就是用js，这其实是模拟select的效果，代码如下：
</p> <p><title>Untitled Document</title> </p> <p>.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}<br /> .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}<br /> .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}<br /> .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;}<br /> .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold;<br /> }<br /> .seldiv{<br /> position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;<br /> SCROLLBAR-FACE-COLOR: #d0dff7;<br /> SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;<br /> SCROLLBAR-SHADOW-COLOR: #FFFFFF;<br /> SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;<br /> SCROLLBAR-ARROW-COLOR: #ffffff;<br /> SCROLLBAR-TRACK-COLOR: #ffffff;<br /> SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;} </p> <p>.select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;}<br /> .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;}<br /> .selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;}<br /> .option {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}<br /> .dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;}<br /> .select .button {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;} </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
</p> <p><title></title> </p> <p><!-- .n1 { border-right: 1px none #999999; border-top: 1px solid #999999; border-bottom: 1px solid #DBDBDB; border-left: 1px solid #999999; cursor: default; width:80px } .n2 { background: url(http://www.blueidea.com/bbs/images/newwin.gif) no-repeat center center; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #DBDBDB; border-left: 1px none; width: 18px; cursor: default; } .ss { color: #FFFFFF; background: #0A246A; } --> </p> <p>BODY {<br /> SCROLLBAR-FACE-COLOR: #d80000;<br /> SCROLLBAR-HIGHLIGHT-COLOR: #0000fc;<br /> SCROLLBAR-SHADOW-COLOR: #24fc90;<br /> SCROLLBAR-ARROW-COLOR: #fcfc48;<br /> SCROLLBAR-TRACK-COLOR: #002400;<br /> SCROLLBAR-DARKSHADOW-COLOR: #00b448;<br /> SCROLLBAR-BASE-COLOR: #fc0000<br /> } </p> <p><!-- table { font-size: 9pt; } --> </p> <table width="98" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="98" nowrap> </td> </tr> <tr> <td id="bb"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb"> <tr> <td id="t1">选择1</td> </tr> <tr> <td id="t2">选择2</td> </tr> <tr> <td id="t3">选择3</td> </tr> </table> </td> </tr> </table> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
• Js操作Select大全(取值、设置选中等等)
• jQuery select操作控制方法小结
• JQuery中对Select的option项的添加、删除、取值
• Jquery多选下拉列表插件jquery multiselect功能介绍及使用
• jquery制作属于自己的select自定义样式
• select自定义小三角样式代码（实用总结）