修改默认的select样式

最新推荐文章于 2024-06-02 22:32:51 发布

原创最新推荐文章于 2024-06-02 22:32:51 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #UI #JavaScript #ViewUI

web前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现类似下拉菜单的选择框效果，包括样式设计和交互逻辑。


<div class="choice_type">
  <dl class="select">
         <dt></dt>
               <dd>
                   <ul>
                       <li><a href="#">12131</a></li>
                       <li><a href="#">下拉2</a></li>
                       <li><a href="#">下拉3</a></li>
                       <li><a href="#">下拉4</a></li>
                       <li><a href="#">下拉5</a></li>
                       <li><a href="#">下拉6</a></li>
                   </ul>
               </dd>
  </dl>
</div>

[color=red]css[/color]


 .choice_type{position:relative;float:left;margin:0 10px;}
.choice_type dt{height:30px;color: #959595; margin-left: -10px; padding-left: 5px; display:inline-block;border:1px solid #DFDFDF;background:#fcfcfb url(../../images/pull_icon.png) no-repeat 80px center;line-height:30px;cursor:pointer;width:85px;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;}
.choice_type dd{position:absolute;left:-50px;top:29px;border:1px solid #d2ccc4;background:#fff;display:none; width: 93px;}
.choice_type dd ul{padding:4px;width:85px;max-height:250px;margin-left: -10px;overflow:auto;}
.choice_type dd ul li a{line-height:28px;margin-left: -10px;display:block;padding:0 8px;text-decoration: none;color: #959595;}
.choice_type dd ul li a:hover{background:#f5f5f5;}

[color=red]js[/color]


//模拟select效果
    $(".select").each(function(){
    	var s = $(this);
    	var z = parseInt(s.css("z-index"));
    	var dt = $(this).children("dt");
    	var dd = $(this).children("dd");
    	//展开
    	var _show = function(){
    		dd.slideDown(200);
    		dd.addClass("cur");
    		s.css("z-index",z+1);
    	};
    	//关闭
    	var _hide = function(){
    		dd.slideUp(200);
    		dd.removerClass("cur");
    		s.css("z-index",z);
    	};
    	dt.click(function(){dd.is(":hidden")?_show():_hide();});
    	dd.find("a").click(function(){dt.html($(this).html());_hide();});
    	$("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
	})