admin 管理员组文章数量: 887021
2023年12月17日发(作者：java的ide)
css 下拉框复选实例
下面是一个CSS下拉框复选框实例。
首先，我们需要一个HTML表单元素来创建下拉框。比如说，我们可以创建一个选择多个选项的下拉框：
```html
```
上面的代码创建了一个ID为"fruits"的选择框，其中"multiple"属性使得我们可以选择多个选项。
接下来，我们可以使用CSS来美化这个下拉框。假设我们想要改变下拉框的背景颜色和选择项的样式。我们可以这样编写CSS代码：
```css
body {
font-family: Arial, sans-serif;
}
select {
background-color: #f2f2f2;
border: none;
padding: 5px;
}
option:checked {
color: white;
background-color: #333;
}
```
上面的CSS代码中，我们使用`select`选择器来选择所有的下拉框元素，并设置了背景颜色、边框和内边距。然后，我们使用`option:checked`选择器来选择已经选中的选项，并设置了文字颜色和背景颜色。
为了使得这些CSS样式能够应用到我们的HTML代码上，我们可以将这些CSS代码嵌入到HTML文档的`