jq模拟select下拉框，自定义option的css样式

原创

Savalone

发布于 2022-06-01 07:26:22

2.7K02

代码可运行

文章被收录于专栏：Savalone's BlogSavalone's Blog

运行总次数：2

代码可运行

option的样式没办法修改。

因为option是html固有元素；因而无论怎么修改在浏览器上都是不起作用的。

想修改option样式，只能通过div ul li模拟select功能；功能如下，具体细节可以自己再调节。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<div class="select">
    <input type='text' class="choose" placeholder="选择型号" name="model">
    <div class="option">
        <ul>
            <li>VMC650</li>
            <li>VMC850</li>
            <li>VMC1160</li>
            <li>VMC1580</li>
            <li>其他</li>
        </ul>
    </div>
</div>

<style>
.select{
/*演示用，页面body有内容时,不需要*/
width: 500px;
height: 500px;
}
input.choose {
width:200px;
height:62px;
font:14px/22px '微软雅黑';
color:#333;
border:1px solid #ededed;
}
.option {
display:none;
width:200px;
background:#073782;
position:absolute;
z-index:99999;
}
.option ul {
padding:0;
}
.option ul li {
list-style:none;
width:100%;
line-height:45px;
height:45px;
padding-left: 20px;
color:#fff;
}
</style>

<!--引入jq-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>   
//option下拉框		   
$('.choose').click(
function () {
	console.log("a")
	$('.option').toggle();
});
//点击input和body空白处隐藏
$("body").click(function (e) {
	if (!$(e.target).closest(".choose,.option").length) {
		$(".option").hide();
	}
});
//取li的内容替换input内容
$(".option li").click(function () {
  var _text = ($(this).text())
  $(".choose").val(_text)
  $(".option").hide()
});
</script> 
 
</body>
</html>