css 表单select |css 设置表格样式

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

为了控制select元素的样式，CSS 可以针对其不同状态（例如悬停、聚焦和禁用）进行设计。

select {
font-size: 1.2em;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
outline: none;
}
select:hover {
border-color: #999;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
select:focus {
border-color: #0cf;
box-shadow: 0 0 5px rgba(0,204,255,0.3);
}
select:disabled {
background-color: #ccc;
color: #999;
}

上面的样式包括边框、背景颜色和内边距。当select元素没有聚焦时，不会描绘它外面的轮廓线。当悬停时会有小的阴影效果，当聚焦时边框颜色变亮。如果禁用select元素，将使用不同的颜色和字体颜色来反映其状态。

无论您是为实现更好的可访问性还是仅仅是为了更好的外观，设置select元素的样式是一项有价值的任务。