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 许可！」
