本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式。于是在网上搜索了一下,才知道,原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题,于是找了一篇不错的文章转过来,希望对大家有帮助————
首先要告诉大家,如果你是用css的方法,除了箭头部分,其他都可以改变,这是很令人别扭的事,因为其他的样式改了,箭头部分改不了等于无用。
下面举个css改select的例子
.box{border:1px solid
#C0C0C0;width:182px;height:19px;clip:rect(0px,181px,18px,0px);overflow:hidden;}
.box2{border:1px solid
#F4F4F4;width:180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;}
select{position:relative;left:-2px;top:-2px;font-size:12px;width:183px;line-height:14px;bo
rder:0px;color:#909993;}
网站的封面
上海夏天(一一友情提供)
上海夏天(一)
上海夏天出版了
在雨中(二)
开往黎明的地铁(二)
开往黎明的地铁
亲爱的你们在干什么
更多封面……
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
如果你想彻底的改变select的样子,有一种方法是用htc,但它有个缺点就是除了ie内核的,其他的他不支持。
举个例子,下载地址如下: 下载此文件
第二种方法就是用js,这其实是模拟select的效果,代码如下:
.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
.td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}
.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}
.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;}
.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;
}
.seldiv{
position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;
SCROLLBAR-FACE-COLOR: #d0dff7;
SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}
.select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;}
.selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;}
.selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;}
.option {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}
.dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;}
.select .button {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
BODY {
SCROLLBAR-FACE-COLOR: #d80000;
SCROLLBAR-HIGHLIGHT-COLOR: #0000fc;
SCROLLBAR-SHADOW-COLOR: #24fc90;
SCROLLBAR-ARROW-COLOR: #fcfc48;
SCROLLBAR-TRACK-COLOR: #002400;
SCROLLBAR-DARKSHADOW-COLOR: #00b448;
SCROLLBAR-BASE-COLOR: #fc0000
}
|
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
您可能感兴趣的文章:
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- Js操作Select大全(取值、设置选中等等)
- jQuery select操作控制方法小结
- JQuery中对Select的option项的添加、删除、取值
- Jquery多选下拉列表插件jquery multiselect功能介绍及使用
- jquery制作属于自己的select自定义样式
- select自定义小三角样式代码(实用总结)