Code666 (代码贴、代码片段)

[JavaScript] select上添加div优化样式 →→→→→进入此内容的聊天室

来自 , 2020-08-10, 写在 JavaScript, 查看 109 次.
URL http://www.code666.cn/view/f550e0ba
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <title>Examples</title>
  8.     <meta name="description" content="">
  9.     <meta name="keywords" content="">
  10.     <link href="" rel="stylesheet">
  11.     <style type="text/css">
  12.     #mainsearch_select {
  13.         width: 70px;
  14.         height: 35px;
  15.         float: left;
  16.         position: relative;
  17.     }
  18.    
  19.     #mselect-t {
  20.         width: 70px;
  21.         height: 37px;
  22.         line-height: 38px;
  23.         cursor: pointer;
  24.         margin-left: 5px;
  25.     }
  26.    
  27.     #mselect-t span {
  28.         width: 64px;
  29.         height: 37px;
  30.         float: left;
  31.         display: block;
  32.         color: #000;
  33.     }
  34.    
  35.     #mselect-t i {
  36.         width: 5px;
  37.         height: 3px;
  38.         margin-top: 17px;
  39.         float: left;
  40.         display: block;
  41.         background: url(main_select_ico.png);
  42.     }
  43.    
  44.     #mselect-c {
  45.         width: 68px;
  46.         height: 103px;
  47.         border: solid 1px #ccc;
  48.         position: absolute;
  49.         top: 37px;
  50.         left: 0;
  51.         background: #fff;
  52.         display: none;
  53.     }
  54.    
  55.     #mselect-c li {
  56.         width: 100%;
  57.         height: 25px;
  58.         border-bottom: dotted 1px #ddd;
  59.         line-height: 25px;
  60.         text-align: center;
  61.         cursor: pointer;
  62.         color: #000;
  63.     }
  64.    
  65.     #mselect-c li:last-child {
  66.         border-bottom: none;
  67.     }
  68.    
  69.     #mselect-c li:hover {
  70.         background: #b2e1ff;
  71.         color: #fff;
  72.     }
  73.    
  74.     #mainsearch_btn {
  75.         width: 70px;
  76.         height: 42px;
  77.         float: right;
  78.         overflow: hidden;
  79.     }
  80.    
  81.     #mainsearch_btn input[type=submit] {
  82.         width: 70px;
  83.         height: 42px;
  84.         border: none;
  85.         background: transparent;
  86.         text-indent: -9999em;
  87.     }
  88.    
  89.     #mselect {
  90.         display: none;
  91.     }
  92.     </style>
  93. </head>
  94.  
  95. <body>
  96.     <div id="mainsearch_select">
  97.         <div id="mselect-t"><span>商品信息</span><i></i></div>
  98.         <ul id="mselect-c">
  99.             <li>商品信息</li>
  100.             <li>进货记录</li>
  101.             <li>销售记录</li>
  102.             <li>库存余量</li>
  103.         </ul>
  104.         <select id="mselect" style="display:none;">
  105.             <option selected>商品信息</option>
  106.             <option>进货记录</option>
  107.             <option>销售记录</option>
  108.             <option>库存余量</option>
  109.         </select>
  110.     </div>
  111.     <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  112.     <script type="text/javascript">
  113.     $(function() {
  114.         $("#mselect-c").css("display", "none");
  115.         $("#mselect-t").click(function() {
  116.             if (document.getElementById("mselect-c").style.display == "none") {
  117.                 $("#mselect-c").show();
  118.             } else {
  119.                 $("#mselect-c").hide();
  120.             }
  121.         });
  122.         $("#mselect-c li").click(function() {
  123.             $("#mselect-t span").text($(this).text());
  124.             var thisindex = $(this).index();
  125.             $("#mselect option").removeAttr("selected").eq(thisindex).attr("selected", "selected");
  126.             $("#mselect-c").hide();
  127.         });
  128.     })
  129.     </script>
  130. </body>
  131.  
  132. </html>
  133.  

回复 "select上添加div优化样式"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666