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

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://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.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>

打赏

取消

感谢支持 Savalone !

扫码支持

打开支付宝扫一扫,即可进行扫码打赏哦


「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」
  • 3