css中下拉带复选 |css 长英文

<select id="fruit" multiple>
<option value="apple">苹果</option>
<option value="orange">橙子</option>
<option value="banana">香蕉</option>
<option value="grape">葡萄</option>
</select>

通过使用multiple属性，大家可以将一个下拉列表转换为带复选框的下拉菜单。如果没有multiple属性，下拉菜单只能选择一个选项。

为了美化带有复选框的下拉菜单，大家可以使用CSS来自定义其外观。

select[multiple] {
height: auto;
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
select[multiple]:focus {
outline: none;
border-color: #aaa;
}
select option {
font-size: 16px;
}

上面的CSS代码中定义了下拉菜单的外观，包括菜单的边框、背景、样式、图标等。其中，大家用SVG定义了一个三角形的图标，并将其作为下拉菜单的背景图片，position设置为靠右、垂直居中。大家还设置了当菜单获得焦点时，选框的颜色会变为深灰色。

使用下拉带复选可以大大简化用户选择的过程，减少用户的操作繁琐。同时，借助CSS的自定义化功能，大家还可以美化下拉菜单的外观，优化用户的体验。