自定义下拉列表

前朝楚水

发布于 2018-04-02 15:08:07

1.9K0

发布于 2018-04-02 15:08:07

文章被收录于专栏：互联网杂技

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 body{
 margin: 20px;
 }
 ul,li{
 margin: 0px;
 padding: 0px;
 list-style: none;
 }
 #test1{
 width: 300px;
   height: 40px;
   border: solid 1px darkred;
   line-height: 40px;
   vertical-align: middle;
   padding-left: 20px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 .trangle1{
 width: 0px;
 height: 0px;
 float: right;
 margin-right: 20px;
 margin-top: 14px;
 border-top:solid 8px red;
 border-right:solid 8px white;
 border-left:solid 8px white;
 border-bottom:solid 8px white;
 }
 #test1:hover .trangle1{
 margin-top: 8px;
 border-top:solid 8px ghostwhite;
 border-right:solid 8px ghostwhite;
 border-left:solid 8px ghostwhite;
 border-bottom:solid 8px red;
 }
 #test1:hover{
  background:ghostwhite;
 }
  .list{
   width: 300px;
   height: 40px;
   border: solid 1px darkred;
   line-height: 40px;
   vertical-align: middle;
   padding-left: 20px;
  }
  .list:hover{
   background:ghostwhite;
  }
  .list:nth-last-of-type{
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
  }
  .list_last{
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
  }
 </style>
 </head>
 <body>
  <div id="test1">选项0<span class="trangle1"></span> </div>
 <ul id="test_ul">
 <li class="list">选项0</li>
 <li class="list">选项1</li>
 <li class="list">选项2</li>
 <li class="list">选项3</li>
 <li class="list">选项4</li>
 <li class="list">选项5</li>
 <li class="list list_last">任然可以添加li标签</li>
 </ul>
 </body>
</html>
<script>
 (function(){
 var list=document.getElementsByClassName("list");
 var test1=document.getElementById("test1");
 var test_ul=document.getElementById("test_ul");
 test_ul.style.display="none";
 var list_value=null;
 test1.onclick=function(e){
 e=e||window.event
  e.stopPropagation();
 test_ul.style.display="block";
 for(var i=0;i<list.length;i++){
 (function(i){
 list[i].onclick=function(){
 list_value=list[i].innerHTML;
 get_list_value(list_value);
 test1.innerHTML=list[i].innerHTML+"<span class='trangle1'></span>";
 test_ul.style.display="none";
 }
 })(i)
 }
 }
 document.onclick=function(){
 test_ul.style.display="none";
 }
 function get_list_value(str){
 console.log(str);
 return str;
 }
 })()
</script>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2015-10-28，如有侵权请联系 cloudcommunity@tencent.com 删除

html