下拉框中的option取消默认样式且划过时改变样式
时间: 2023-09-29 07:09:42 AIGC 浏览: 121
可以使用CSS来实现取消下拉框中option的默认样式，并且在鼠标经过时改变样式。代码如下：
```html
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
```
```css
select {
appearance: none; /* 取消默认样式 */
-webkit-appearance: none;
-moz-appearance: none;
background-color: white;
border: 1px solid #ccc;
padding: 5px 10px;
}
/* 鼠标经过样式 */
option:hover {
background-color: #ddd;
}
```
上述代码中，`appearance`属性将取消下拉框的默认样式，同时使用`-webkit-appearance`和`-moz-appearance`来兼容不同浏览器。`background-color`和`border`属性用于设置下拉框的背景颜色和边框样式，`padding`用于设置内边距。而`option:hover`选择器则用于设置鼠标经过时的样式，这里只设置了`background-color`，可以根据需要添加其他样式。
阅读全文
相关推荐
