作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:
select,option {background-color:lime} 1 2 不是一样的嘛 select,option {background-color:lime;font-family:华文行楷;color:red;} 上海 北京 香港 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
日久天长之后,人们对select要求高了,要修一修边幅:
Untitled Document .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;} [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
要加一些链接,变成菜单:
body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)} .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;} 网易 google 搜狐
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
产品快速导航 多媒体产品 DLP数字光显背投 LCD液晶电视 数字高清背投 PDP等离子电视 CRT高清彩电 酒店电视 乐华彩电 视盘机 监视器 电视墙 通讯产品 手机 电话机 网络设备 宽带产品 数码产品 家用电脑 商用电脑 笔记本电脑 DV产品 MP3播放器 MP4播放器 家电产品 电冰箱 洗衣机 空调 中央空调 电饭煲 电磁炉 电风扇 饮水机 电暖器 净水器 烧烤炉 电气产品 开关插座 照明产品 工业电器 智能楼宇 部品产品 集成电路 高频头 电池 文化产品 美卡音像 TCL光盘 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
后来发展到其文字内容可以增、删、编、改，即可以编辑：
EditSelect .selecttext{ border:0px height: 16; font-family:arial; font-size:12px; } .selectbutton{ font-family:webdings; font-size:10px; height: 19; width: 16; border:1px solid #83A5EB; line-height:0px; padding-bottom:3px; background-color:#D1E0FD } .selecttable{ font-family:arial; font-size:12px; cursor:default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectdiv { position: absolute; width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7F9DB9 } 可编辑的Select 长度可以随意修改 可以设置为只读 可以遮盖系统Select 系统的Select [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
12下一页阅读全文
