<!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样式列表-------美化列表的更多相关文章

  1. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  2. CSS效果：CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  3. css select 样式列表-----另一种样式列表

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  4. CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...

  5. 帝国cms 列表页分页样式修改美化【2】

    上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...

  6. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  7. CSS：列表样式（设置列表项的标志图案/位置）

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  8. css如何玩转有序无序列表项list样式

    在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...

  9. CSS背景样式和列表样式

    background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...

随机推荐

  1. Lintcode: Search Range in Binary Search Tree

    Given two values k1 and k2 (where k1 < k2) and a root pointer to a Binary Search Tree. Find all t ...

  2. java类的定义以及参数传递

    class类(类似结构体)的定义 import java.util.Scanner; import java.io.*; class student{//类的名称 public String name ...

  3. [原创]安装Oracle 11gR2，以及如何在win8下使用plsql develper连接Oracle数据库 ，在这里和大家分享下

    一,关于win8下安装Oracle 11gR2 1.我下载的是Oracle_11gR2_win64.其中有两个包: 注意:在解压了之后将:win64_11gR2_database_2of2\datab ...

  4. Python学习总结10：获取shell输出结果

    Python中获取shell命令的输出结果的常见方法如下几种: 1. import subprocess output = subprocess.Popen(['ls','-l'],stdout=su ...

  5. C#: 异步委托

    http://www.cnblogs.com/yingzhongwen/p/4568350.html 讲了委托与事件,但是对异步委托研究得还不够深入. http://www.cnblogs.com/l ...

  6. java中的Robot

    项目中最近遇到了一个棘手问题,无法用WebDriver去操作win弹出窗口,经过多番查找,发现了Robot这个奇葩东东,Robot可以模拟鼠标和键盘操作, robot可以实现本地系统输入空包括win弹 ...

  7. 反射认识_06_ArrayList_HashSet区别

    包01: package ReflectionCollection; public class ReflectionConstructorPoint { private int x; public i ...

  8. 前端开发与Seo基础

    网页代码优化       1:<title>标题:强调重点,重点关键词放在前面,每个页面的title尽量不相同 2:<meta keywords>关键词:列举出几个重要关键词, ...

  9. PAT乙级 1029. 旧键盘(20)

    1029. 旧键盘(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 旧键盘上坏了几个键,于是在敲一段文字的 ...

  10. Sinatra+SQLite3+DataMapper - 十分完整的tutorial - “Superdo”

    原文地址:https://ididitmyway.herokuapp.com/past/2010/3/30/superdo_a_sinatra_and_datamapper_to_do_list/ 这 ...