css怎样设置下拉列表(select)样式?

发布网友发布时间：2022-04-26 07:46

共4个回答

热心网友时间：2022-04-06 11:56

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:

<html>
<head>
<style>
.div1{
width:600px;
height:200px;
font-size:13px;
}
.div select{
width:200px;
}

.div select option{
width:150px;
height:30px;
}

</head>

<body>
<div class='div1'>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>

热心网友时间：2022-04-06 13:14

你能用纯粹的CSS样式来写这样的Select，你必须结合js+Css控制一个文本域和一个现实选项的下拉层，来模拟实现这个样的效果。追问可以举个例子吗？

追答比如，你用一个input文本框显示选定的内容，可以设置背景，让文本框显得很好看，然后点击，弹出选择框，用div来美化，选择选项之后，修改input文本框的内容，隐藏掉弹出的div模拟下拉框。简单说，就是用一个input文本框+一个div层来组成一个下拉框，关联的点击操作，用js控制。

热心网友时间：2022-04-06 14:48

纯css是不行的，select样式的框架是跟着系统主题那个样式走的，可以用js模拟出来，不过个人感觉没有必要哈

热心网友时间：2022-04-06 16:40

可以用JS，楼主想要可以M我