<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
select {
text-align: center;
height: 50px;
overflow: hidden;
border: none;
outline: none;
background: #eee;
border-radius: 10px;
}
option{
width: 150px;
height: 40px;
font-size: 20px;
display: inline-block;
border-radius: 10px;
padding-top: 10px;
}
</style>
</head>
<body>
<select name="toppings" multiple="multiple">
<option value="mushrooms" selected="selected">mushrooms</option>
<option value="greenpeppers">green peppers</option>
</select>
</body>
</html>
项目需求：让option选项并排显示，同时隐去select那丑陋的默认选择小三角
总结：网上纯css改默认样式的方法看了一些，基本都是一个套路，而且相互抄袭，这倒没什么，关键是试了一下，不起作用。还有一个套路就是重新布局模拟select，因为项目是二次开发，为避免修改前后台表单验证，没有采用这个方案。而反观以上代码，功能实现了，但有个缺点就是默认选中背景色和点击选中背景色没法调整，不知道是否有相应css属性可以调整，欢迎探讨！
时间： 2024-10-06 09:31:33