js 记录五修改select默认样式

最新推荐文章于 2023-10-10 16:16:34 发布

WMY10001

最新推荐文章于 2023-10-10 16:16:34 发布

阅读量1.6k

点赞数 1

分类专栏： HTML

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法一：css+js：

预览：

最后才发现这个外边框、高度、hover还是调不了

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="js/frame/jquery-3.3.1.min.js"></script>
    <style>
        .sel_mask{                    /*将<a></a>相对定位*/
            position:relative;
            width:200px;
            height:25px;
            background:#24A0D8;
            border-radius: 5px;
            box-shadow:1px 1px 5px #169BD5;
            display:inline-block;
            text-decoration: none;
        }
        .sel_mask:hover{         /*添加hover效果*/
            background:#169BD5;
        }
        .sel_mask select{        /*以相同大小将<select></select>绝对定位*/
            top:0px;
            left:0px;
            position:absolute;
            width:200px;
            height:25px;
            opacity:0;
        }
        .sel_mask select option[selected]{
            font-weight:bold
        }
        .sel_mask select option:nth-child(even) {
            background-color:#A7DAEF;
        }
        .sel_mask select option{
            color:#EA5400;
        }
        .sel_mask span{     /*显示内容*/
            position: absolute;
            top:3px;
            left:5px;
            right: 20px;
            display: inline-block;
            color:#fff;
            overflow:hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
        }
        .sel_mask img{          /*箭头图标*/
            display: inline-block;
            position: absolute;
            top:2px;
            right: 5px;
        }
    </style>
</head>
<body>
<a href="javascript:void(0)"  class="sel_mask"><span>请选择</span><img src="arrow_down.png"/>
    <select  class="sel">
        <option>请选择</option>
        <option>选项一</option>
        <option>选项二</option>
        <option>选项三</option>
        <option>选项四</option>
        <option>选项五</option>
        <option>选项六</option>
        <option>选项七</option>
    </select>
</a>
<script>
$(function () {
    $('.sel').change(function () {    // 选择后替换内容并恢复箭头方向
        $('span').html($('.sel').find('option:selected').html());
        $('.sel_mask').find('img').attr('src','arrow_down.png');
    })
    $('.sel').blur(function () {      //什么也不选恢复箭头方向
        $('.sel_mask').find('img').attr('src','arrow_down.png');
    })
    $('.sel').click(function(){     // 点击后更改箭头方向
        $('.sel_mask').find('img').attr('src','arrow_up.png');
    })
})
</script>
</body>
</html>

//来自https://www.cnblogs.com/chrdai/p/6163899.html

方法二：css+js(复杂)

html+css部分：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>Select</title>
</head>
<style type="text/css">
    *{margin:0;padding:0;}
    select{outline:none;}
    ul{list-style:none;}
    a{text-decoration:none;}
    
    select{display: none;}
    .select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}
    .select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;background: url(https://img-blog.csdnimg.cn/20190705224216868.png) no-repeat 156px 0;}
    .select_option{border: 1px solid #b0a296;border-top: none;display: none;}
    .select_option li{padding-left: 5px;}
    .select_option li.selected{background-color: #F3F3F3;color: #999;}
    .select_option li.hover{background: #7b6959; color: #fff;}
</style>

<body>
<select name="choose" id="choose">
    <option value="选择风格" selected="selected">选择风格</option>
    <option value="复古风">复古风</option>
    <option value="摇滚风">摇滚风</option>
    <option value="怀旧风">怀旧风</option>
</select>
</body>

<script src="js/jquery-1.8.3.min.js"></script><!--用这个版本= =!-->
<script src="js/jquery.select.js"></script>
<script>
</script>
</html>

js部分:

(function($){

	var selects=$('select');//获取select

	for(var i=0;i<selects.length;i++){
		createSelect(selects[i],i);
	}

	function createSelect(select_container,index){

		//创建select容器，class为select_box，插入到select标签前
		var tag_select=$('<div></div>');//div相当于select标签
		tag_select.attr('class','select_box');
		tag_select.insertBefore(select_container);

		//显示框class为select_showbox,插入到创建的tag_select中
		var select_showbox=$('<div></div>');//显示框
		select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);

		//创建option容器，class为select_option，插入到创建的tag_select中
		var ul_option=$('<ul></ul>');//创建option列表
		ul_option.attr('class','select_option');
		ul_option.appendTo(tag_select);
		createOptions(index,ul_option);//创建option

		//点击显示框
		tag_select.toggle(function(){
			ul_option.show();
		},function(){
			ul_option.hide();
		});

		var li_option=ul_option.find('li');
		li_option.on('click',function(){
			$(this).addClass('selected').siblings().removeClass('selected');
			var value=$(this).text();
			select_showbox.text(value);
			ul_option.hide();
		});

		li_option.hover(function(){
			$(this).addClass('hover').siblings().removeClass('hover');	
		},function(){
			li_option.removeClass('hover');
		});

	}

	function createOptions(index,ul_list){
		//获取被选中的元素并将其值赋值到显示框中
		var options=selects.eq(index).find('option'),
			selected_option=options.filter(':selected'),
			selected_index=selected_option.index(),
			showbox=ul_list.prev();
			showbox.text(selected_option.text());
		
		//为每个option建立个li并赋值
		for(var n=0;n<options.length;n++){
			var tag_option=$('<li></li>'),//li相当于option
				txt_option=options.eq(n).text();
			tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);

			//为被选中的元素添加class为selected
			if(n==selected_index){
				tag_option.attr('class','selected');
			}
		}
	}

})(jQuery)

预览：

//来自17sucai

https://www.cnblogs.com/ding2011/p/5702377.html 也是1.几版本的jq

https://www.lanrenzhijia.com/jquery/2644.html 和

http://www.51xuediannao.com/js/texiao/jQuery_select.html 和

http://www.divcss5.com/css-texiao/texiao371.shtml 和

http://www.jq22.com/jquery-info19214好看

https://www.html5tricks.com/jquery-custom-dropdown-list.html好看

jq版本可以，用的ul li

WMY10001

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 记录五修改select默认样式

方法一：css+js：预览：最后才发现这个外边框、高度、hover还是调不了<!DOCTYPE><html><head> <script type="text/javascript" src="jquery.js"></script> <script src="js/frame/jquery-3.3...
复制链接

扫一扫