jq模拟select下拉框，自定义option的css样式
原创jq模拟select下拉框，自定义option的css样式
原创
Savalone
发布于 2022-06-01 15:26:22
发布于 2022-06-01 15:26:22
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>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
