select下拉选择框美化实现代码(js+css+图片)

因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等。
效果如下图:

下拉select选择框

body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}
h1{font-size:12px;color:#444;}
ul{margin:0;padding:0;list-style:none;}
.dropDownList{position:absolute;left:100px;top:100px;}
.dropDownList div.dropdown{float:left;margin-right:120px;}
.dropDownList span{display:block;width:146px;height:26px;background:url(/upload/2010-3/20100303231959754.gif) left top no-repeat;line-height:26px;text-indent:12px;border:solid 1px #83BBD9;cursor:default;}
.dropDownList span.over{background-position:left bottom;border-color:#B4C91A;}
.dropDownList ul{width:200px;display:none;position:absolute;}
.dropDownList ul li{background:#eee;height:20px;width:100%;padding:3px 0;text-indent:12px;cursor:default;line-height:20px;}
/*普通状态下的样式*/
.dropDownList ul li.normal{background:#eee;}
/*鼠标移上的样式*/
.dropDownList ul li.over{background:#ccc;}
/*被选中的样式*/
.dropDownList ul li.current{background:#c2c2c2;font-weight:bold;}
.dropDownList ul.show{display:block;}

请选择
1986
1987
1988
1989
1990

请选择年份

性别


不是男,也不是女

请选择性别

幼儿班
小学
初中
高中

请选择学历

var ____configArray;
function __initDropDownList(configArray){
//获取Select菜单
____configArray=configArray;
var existArray=configArray.split("|");
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • Js获取下拉框选定项的值和文本的实现代码

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和文本: 1. IE和Firefox都支持的方法:获取文本 复制代码 代码如下: var obj=document.getElementById('select_template'); var text=obj.options[obj.selectedIndex].text;//获取文本 var ob

  • js 动态选中下拉框

    for(var j=0;j<document.getElementById("Select"+rowID).options.length;j++) { if(document.getElementById("Select"+rowID).options[j].text==value[5]) index=j; } if(index>=0) document.getElementById("Select"+rowID).options[i

  • js 自定义个性下拉选择框示例

    复制代码 代码如下: <!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=&qu

  • JS操作select下拉框动态变动(创建/删除/获取)

    1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement_x("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码 代码如下: function addOption(){ //根据id查找对象, var obj=docu

  • JS简单设置下拉选择框默认值的方法

    本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

  • javascript 下拉框显示当前日期

    需要增加的地方: 复制代码 代码如下: <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> 测试代码: 复

  • JS实现的5级联动Select下拉选择框实例

    本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

  • js+csss实现的一个带复选框的下拉框

    效果图: css: <style type="text/css"> /* 带复选框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{ height:23px; float:left; display:inline-

  • js下拉选择框与输入框联动实现添加选中值到输入框的方法

    本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来. 运行截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-value-to-input-codes/ 具体代码如下: <html> <

  • 自定义的一个简单时尚js下拉选择框

    复制代码 代码如下: <!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=&qu

随机推荐