css下拉列表样式有哪些 |css 3d环境

<select>
<option value="1">选项 1</option>
<option value="2">选项 2</option>
<option value="3">选项 3</option>
</select>

这是最基本的下拉列表样式，也是浏览器默认的样式。

select {
background: #f9f9f9;
border: none;
padding: 10px;
font-size: 14px;
}
option {
background: #fff;
color: #000;
font-size: 14px;
}

这是最简单的自定义下拉列表样式，大家可以修改背景、边框、文字颜色和字体大小。

/* 模拟选择效果 */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
background: url(箭头图标) no-repeat right center;
background-size: 12px 12px;
padding: 10px;
font-size: 14px;
border: none;
border-radius: 4px;
}

这是使用了外部图标来模拟选择效果，可以使用CSS3属性 appearance 来取消系统默认的样式。

select {
background-color: #fff;
color: #333;
font-size: 14px;
height: 30px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
select:hover,
select:focus {
border-color: #66afe9;
outline: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
select option {
background-color: #fff;
color: #333;
}

这是使用了 CSS3 属性 box-shadow 来自定义下拉框的阴影效果，同时也可以设置鼠标悬停和选中状态的样式。

总之，使用 CSS 可以让下拉列表样式变得更加美观，同时也可以提高用户体验。