css下拉筛选 |css3 高级

.dropdown-select {
display: inline-block;
position: relative;
}
.dropdown-select select {
width: 100%;
padding: 10px;
font-size: 16px;
line-height: 1;
border: 1px solid #ccc;
border-radius: 4px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('images/arrow.png');
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}

上述代码定义了一个下拉筛选构件的样式，首先 .dropdown-select 类负责控制整个下拉菜单的风格，它使用了 inline-block 属性，使其呈现出块级元素的效果，并设置了 position 属性以控制下拉菜单的位置。下面，大家来看一下下拉列表的样式变化：

.dropdown-select select {
font-size: 16px;
line-height: 1;
border: 1px solid #ccc;
border-radius: 4px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('images/arrow.png');
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}

在上面的代码中，大家设置了下拉列表的大小、字体大小、边框样式以及边框的圆角大小。此外，大家使用了 appearance 属性来去除默认下拉箭头的样式，’-webkit-appearance’ 和 ‘-moz-appearance’ 属性分别是兼容 Chrome 和 Firefox 浏览器的样式设置，最后大家还设置了选项箭头的背景图片，并居右对齐。

下面，大家来添加一些 CSS 代码，为下拉列表的各项添加样式：

.dropdown-select select option {
font-size: 14px;
font-weight: normal;
color: #333;
padding: 10px 15px;
background-color: #fff;
border: none;
}
.dropdown-select select option:hover {
background-color: #f5f5f5;
}
.dropdown-select select option:selected {
background-color: #08c;
color: #fff;
}

上述代码定义缺省状态下的下拉列表样式、最终用户所选择的状态以及鼠标悬停状态下的样式。其中，大家设置了每项列表的字体大小、颜色、背景色以及各种空白处的内边距大小。选择状态下大家用了描边，而悬停状态下的背景颜色变浅。

CSS 下拉列表的样式非常灵活，可以根据需要随时改变和定制，非常方便使用。当然，它的视觉效果也具有较高的通用性，大部分用户都可以很容易地理解它所表达的意思。