首页 > 代码库 > 代教材之(用DIV+CSS定义漂亮下拉框select)

代教材之(用DIV+CSS定义漂亮下拉框select)

2024-07-12 10:43:56   218人阅读

  1 <!DOCTYPE HTML>  2 <html>  3     <head>  4         <meta http-equiv="X-UA-Compatible" content="IE=edge" />  5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  6     <title>代教材之(用DIV+CSS定义漂亮下拉框)</title>  7 <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js" charset="utf-8"></script>  8 <style type="text/css">  9 *{ 10     margin: 0px; 11     padding: 0px; 12     font-size: 13px; 13     font-family: "微软雅黑","宋体"; 14 } 15 ul{ 16     list-style: none; 17     width: 400px; 18     margin: 0 auto; 19 } 20  21 .div1{ 22     width: 100%; 23     height: 200%; 24 } 25  26 .u-d-con{ 27     width: 270px !important; 28     position: relative; 29     float: left; 30     margin-right: 360px; 31 } 32 strong{ 33     display: block; 34     width: 100%; 35     font-size: 16px; 36     color: #34495E; 37     text-align: left; 38     font-weight: normal;/*字体非粗*/ 39     margin-top: 30px; 40     margin-bottom: 10px; 41     position: relative; 42 } 43 strong span{ 44     font-size: 14px; 45     margin-left: 10px; 46     color: #88848E; 47 } 48 .must{/*必填项小桔点*/ 49     background: url(http://images.cnblogs.com/cnblogs_com/gubook/541083/o_works-icons.png) no-repeat scroll -365px -911px transparent; 50     width: 7px; 51     height: 7px; 52     top:20px;/*相对父级元素*/ 53     right: 15px; 54     position: absolute; 55 } 56  57 .selectBox {  58     background:#FFFFFF;  59     border: #b8c4ce 1px solid;  60     cursor:pointer;  61     display:block;  62     float: left;  63     width: 270px;  64     height: 48px; 65 } 66 .selectBox:hover{ 67     border: 1px solid #4BA4DD;  68 } 69 .selectBoxHover {    } 70 .selectBox .selectValue {  71     position: relative;  72     overflow: hidden;  73     display: block;  74 } 75 .selectBox .selectValue p {  76     display:block;  77     height: 36px;  78     line-height: 36px;  79     padding: 6px 30px 6px 20px;  80     white-space:nowrap; /*强制一行*/ 81     overflow:hidden;/*和这个配合隐藏*/ 82     color:#5d6d7e;  83      font-size: 14px;  84 } 85 .selectBox .selectValue i {  86     position: absolute;  87     top: 0;  88     right: 30px;  89     display:block;  90     height: 50px;  91     width: 20px;  92     overflow:hidden;  93     background: url(http://images.cnblogs.com/cnblogs_com/gubook/541083/o_select-down.png) no-repeat 0 0; /*箭头向下*/ 94 } 95 .selectBox .selectBoxHover i {  96     background: url(http://images.cnblogs.com/cnblogs_com/gubook/541083/o_select-down.png) no-repeat 0 -50px;  /*箭头向上*/ 97 } 98  99 .selectBoxOptions { 100     background:#FFFFFF; 101     margin-left: -1px; 102     border: #b8c4ce 1px solid; 103     list-style:none;    104     overflow-y:auto; 105     z-index:1000;/*越大越顶层*/    106     position: absolute;    107     width:270px; 108     display:none; 109 }110 .selectBoxOptions a {    111     font-family: "宋体","微软雅黑","Arial";112     color: #7f7f7f;    113     display:block;    114     height:36px; 115     line-height:36px; 116     padding-left:20px; 117     background:#fff; 118     overflow:hidden; 119     white-space:nowrap; 120     font-size: 14px; 121 }122 /*解决firefox选中边框*/123 .selectBox a { 124     outline: none; 125     text-decoration:none; 126 }127 .selectBox a:focus { 128     outline: none; 129     text-decoration:none; 130 } 131 a.selected{132     background: #3498db;133     color: #FFF;134 }135 .selectBoxOptions a:hover{ 136     background: #eae9e9; 137     color: #222; 138 }139 </style>140 </head>141 <body>142 <div class="div1">143     <div class="clearfix">144                 <div style="float:left;width:272px;margin-left:100px;">145                     <strong >146                         认知度147                         <span>148                             知晓.兴趣.意向.尝试.重复>习惯149                         </span>150                     </strong> <!--标题-->151                     <div class="clearfix">152                         <div class="u-d-con" style="width:272px;">153                             <div id="selectBox-kesid" class="selectBox">154                                 <input type="hidden" value="" id="kesid" name="kesid" />155                                 <a class="selectValue" href="javascript:;">156                                     <p id="selectValueSpan-kes">157                                         请选择认知度158                                     </p>159                                     <i></i>160                                 </a>161                                 <ul class="selectBoxOptions">162                                     <li class="selectBoxItem">163                                         <a href="javascript:;" class="selected" rel="点击左边选项，此内容会变">请选择认知度</a>164                                     </li>165                                     <li class="selectBoxItem">166                                         <a href="javascript:;" rel="知晓"  >知晓</a>167                                     </li>168                                     <li class="selectBoxItem">169                                         <a href="javascript:;" rel="兴趣"  >兴趣</a>170                                     </li>171                                     <li class="selectBoxItem">172                                         <a href="javascript:;" rel="意向"  >意向</a>173                                     </li>174                                     <li class="selectBoxItem">175                                         <a href="javascript:;" rel="尝试"  >尝试</a>176                                     </li>177                                     <li class="selectBoxItem">178                                         <a href="javascript:;" rel="重复"  >重复</a>179                                     </li>180                                     <li class="selectBoxItem">181                                         <a href="javascript:;" rel="习惯"  >习惯</a>182                                     </li>183                                 </ul>184                             </div>185                             <span class="must"></span><!--必填项小桔点-->186                         </div>187                     </div>188                 </div>189 190                 <div style="float:right;width:272px;margin-right:100px;"><!--测试input里面数据保持和隐藏的input一致-->191                     <input type="text" id="testinput" value="点击左边选项，此内容会变" style="border:1px solid red;width:200px;height:35px;" />192                 </div>193 194     </div>195     <script type="text/javascript">196             $("#selectBox-kesid").click(function(){//当点击p 标签时197                 var $this = $(this);198                 var o = $this.find(‘.selectBoxOptions‘).css(‘display‘);/*定义变量o，获取ul的display属性*/199                 if( o == ‘none‘ ){/*如果ul为隐藏，display:none;*/200                     $this.find(".selectBoxOptions").show();/*显示ul*/201                     $this.find(‘.selectValue‘).addClass(‘selectBoxHover‘);/*给a添加class ，用意为让小箭头向上*/202                     $this.find(".selectBoxItem a").click(function(){/* 当li里面的a被点击 时*/203                     $(this).blur();204                     var value = $(this).attr("rel");/*定义变量value 并将a的属性rel的值赋值给变量value*/205                     var txt = $(this).text();    /*定义变量txt 并将<a></a>之前的文本内容赋值给变量txt*/206                     $this.find(‘#kesid‘).val(value);/*将id为kesid的input的value变成 变量value的值*/207                     $("#testinput").val(value);/*右边input的值*/208                     $this.find(‘#selectValueSpan-kes‘).text(txt);/*将默认的p 的文本换成变量txt的值*/209                     $this.find(‘.selectBoxItem a‘).removeClass(‘selected‘);/*去除所有a的蓝底白字样式*/210                     $(this).addClass("selected");/*当前点击对象添加蓝底白字样式*/211                     $this.find(‘.selectBoxOptions‘).hide();/*隐藏ul*/212                     $this.find(‘.selectValue‘).removeClass(‘selectBoxHover‘);/*移除a的class，用意为让小箭头向下*/                213                     return false;214                     });                215                 }else{216                     $this.find(".selectBoxOptions").hide();/*隐藏ul*/217                     $this.find(‘.selectValue‘).removeClass(‘selectBoxHover‘);/*移除a的class，用意为让小箭头向下*/        218                 }            219                 /*点击任何地方关闭层*/220                 $(document).click(function(event){221                     var tar = $(event.target).attr("class");/*当点击除当前主体div的以外任意文档位置时*/222                     if( tar != $this ){223                         $this.find(".selectBoxOptions").hide();/*隐藏ul*/224                         $this.find(‘.selectValue‘).removeClass(‘selectBoxHover‘);/*移除a的class，用意为让小箭头向下*/        225                     }226                 });227                 return false;228             });229     </script>230 </div>231 232 </body>233 </html>


联系
我们