CSS select样式列表-------美化列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css处理下拉列表-这一技客:www.geekso.com</title> <style> .IN { BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: #afaeae 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #afaeae 1px solid; COLOR: #7b7b7b; BORDER-BOTTOM: #afaeae 1px solid; FONT-FAMILY: "verdana" } .selectBoxSelectedArea { PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 1px; BACKGROUND-COLOR: #ffffff } .selectBoxSelectedAreaFocus { PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 1px; BACKGROUND-COLOR: #ffffff } .selectBoxOption { PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff } .selectBoxOptionOver { PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff } .selectBoxOptionInnerLayer { BORDER-RIGHT: #b4b4b4 1px solid; BORDER-TOP: #b4b4b4 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #b4b4b4; OVERFLOW: auto; BORDER-LEFT: #b4b4b4 1px solid; SCROLLBAR-SHADOW-COLOR: #b4b4b4; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; BORDER-BOTTOM: #b4b4b4 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff } </style> </head>
<body > <SCRIPT LANGUAGE="JavaScript"> var nowOpenedSelectBox = ""; var mousePosition = "";
function selectThisValue(thisId,thisIndex,thisValue,thisString) { var objId = thisId; var nowIndex = thisIndex; var valueString = thisString; var sourceObj = document.getElementById(objId); var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value; hideOptionLayer(objId); if (sourceObj) sourceObj.value = nowSelectedValue; settingValue(objId,valueString); selectBoxFocus(objId); if (sourceObj.onchange) sourceObj.onchange(); }
function settingValue(thisId,thisString) { var objId = thisId; var valueString = thisString; var selectedArea = document.getElementById(objId+"selectBoxSelectedValue"); if (selectedArea) selectedArea.innerText = valueString; }
function viewOptionLayer(thisId) { var objId = thisId; var optionLayer = document.getElementById(objId+"selectBoxOptionLayer"); if (optionLayer) optionLayer.style.display = ""; nowOpenedSelectBox = objId; setMousePosition("inBox"); }
function hideOptionLayer(thisId) { var objId = thisId; var optionLayer = document.getElementById(objId+"selectBoxOptionLayer"); if (optionLayer) optionLayer.style.display = "none"; }
function setMousePosition(thisValue) { var positionValue = thisValue; mousePosition = positionValue; }
function clickMouse() { if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox); }
function selectBoxFocus(thisId) { var objId = thisId; var obj = document.getElementById(objId + "selectBoxSelectedValue"); obj.className = "selectBoxSelectedAreaFocus"; obj.focus(); }
function selectBoxBlur(thisId) { var objId = thisId; var obj = document.getElementById(objId + "selectBoxSelectedValue"); obj.className = "selectBoxSelectedArea"; }
function makeSelectBox(thisId) { var downArrowSrc = "http://www.geekso.com/attachment/3j.jpg"; //三角 var downArrowSrcWidth = 16; //宽 var optionHeight = 18; // 高 var optionMaxNum = 7; // var optionInnerLayerHeight = ""; var objId = thisId; var obj = document.getElementById(objId); var selectBoxWidth = parseInt(obj.style.width); var selectBoxHeight = parseInt(obj.style.height); if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px"; newSelect = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver="viewOptionLayer('"+ objId + "')" onMouseOut="setMousePosition('out')">"; newSelect += " <tr>"; newSelect += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick="hideOptionLayer('"+ objId + "')"></td>"; newSelect += " </tr>"; newSelect += " <tr>"; newSelect += " <td height='1'></td>"; newSelect += " </tr>"; newSelect += " <tr>"; newSelect += " <td bgcolor='#D3D3D3'>"; newSelect += " <div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "px;" + optionInnerLayerHeight + "'>"; newSelect += " <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>"; for (var i=0 ; i < obj.options.length ; i++) { var nowValue = obj.options[i].value; var nowText = obj.options[i].text; newSelect += " <tr>"; newSelect += " <td onMouseOver=this.style.backgroundColor='#FFBA00';return true; onMouseOut=this.style.backgroundColor='FFFFFF';return true; bgcolor=#FFFFFF height='" + optionHeight + "' class='selectBoxOption' onMouseOver="this.className='selectBoxOptionOver'" onMouseOut="this.className='selectBoxOption'" onClick="selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')" style='cursor:hand;' >" + nowText + "</td>"; newSelect += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>"; newSelect += " </tr>"; } newSelect += " </table>"; newSelect += " </div>"; newSelect += " </td>"; newSelect += " </tr>"; newSelect += "</table>"; newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#B4B4B4' onClick="viewOptionLayer('"+ objId + "')" style='cursor:hand;'>"; newSelect += " <tr>"; newSelect += " <td style='padding-left:1px' bgcolor='#FFFFFF'>"; newSelect += " <table cellpadding='0' cellspacing='0' border='0'>"; newSelect += " <tr>"; newSelect += " <td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur="selectBoxBlur('" + objId + "')" ></div></td>"; newSelect += " <td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>"; newSelect += " </tr>"; newSelect += " </table>"; newSelect += " </td>"; newSelect += " </tr>"; newSelect += "</table>"; document.write(newSelect); var haveSelectedValue = false; for (var i=0 ; i < obj.options.length ; i++) { if (obj.options[i].selected == true) { haveSelectedValue = true; settingValue(objId,obj.options[i].text); } } if (!haveSelectedValue) settingValue(objId,obj.options[0].text); }
document.onmousedown = clickMouse; </SCRIPT> <Select class="in" id=selectTest style="DISPLAY: none; BACKGROUND: #ffffff; WIDTH: 130px; HEIGHT: 19px" name=search> <OPTION value="" selected>www.geekso.com</OPTION> <OPTION value=name>geekso.com</OPTION> <OPTION value=title>这一技客</OPTION> </Select> <SCRIPT>makeSelectBox("selectTest");</SCRIPT> </body> </html>
CSS select样式列表-------美化列表的更多相关文章
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- CSS效果：CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- css select 样式列表-----另一种样式列表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...
- 帝国cms 列表页分页样式修改美化【2】
上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...
- 学习笔记 第八章 使用CSS美化列表
第8章 使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...
- CSS：列表样式（设置列表项的标志图案/位置）
通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...
- css如何玩转有序无序列表项list样式
在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...
- CSS背景样式和列表样式
background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...
随机推荐
- 对ASP.NET Cookie的一些新的认识
做用户登录,我一直用form验证的方式.有时候,为了节省时间,用户希望用户名输入框能够记住用户名,省得下次重新输入.这个时候光用form验证是不行的,因为form验证的话,用户一退出系统就失效了,所以 ...
- mapreduce小结
(不断更新) MapReduce架构是一种分布式编程架构,它本质上是将任务划分,然后归并.它是以数据为中心的编程架构,相比与分布式计算和并行计算等,它更看重的是吞吐率.它处理的数据是PB级的数据,它并 ...
- Redis认识
摘要:认识Redis 1.安装Redis npm install redis 2.Redis使用 var redis = require("redis"), client = re ...
- Lintcode: Segment Tree Query II
For an array, we can build a SegmentTree for it, each node stores an extra attribute count to denote ...
- 在Adobe AIR/AS 程序中 如何设置目录
首先所有目录都以 "File:///"开头,无论Mac或者Windows 后面的路径 Windows: E:/WorkGround/Txt.txt --> "Fi ...
- Opencv读取各种格式图片，在TBitmap上面重绘
//opencv读取图片 cv::Mat image; //const char *fileName = "HeadImage-UI/Photo-001.bmp"; const c ...
- Java基础(30):String对象的常用方法与实例（String类）
Java 中 String 类的常用方法 Ⅰ String 类提供了许多用来处理字符串的方法,例如,获取字符串长度.对字符串进行截取.将字符串转换为大写或小写.字符串分割等,下面我们就来领略它的强大之 ...
- .NET： 配置文件
VS里项目->添加新项->应用程序配置文件 <?xml version="1.0" encoding="utf-8" ?> <co ...
- 数据库中is null(is not null)与=null(!=null)的区别
在标准SQL语言(ANIS SQL)SQL-92规定的Null值的比较取值结果都为False,既Null=Null取值也是False.NULL在这里是一种未知值,千变万化的变量,不是“空”这一个定值! ...
- JAVA通过poi对Excel数据在(jsp+ssh)环境下导入导出
POI的下载与安装 请到网站http://www.apache.org/dyn/closer.cgi/poi/右击超链接2.5.1.zip下载压缩包poi-bin-2.5.1-final-20040 ...