下拉框按钮在网页开发中非常常见。利用CSS样式的设置，我们可以创建出漂亮的下拉框按钮，下面我们一步步来看怎样做到。 首先，在HTML文件中加入一个select标签，例如：

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

接下来，我们给select标签加上CSS样式，使其变为下拉框按钮的样式：

p {
font-family: Arial, sans-serif;
}
select {
font-size: 16px;
padding: 10px;
border: none;
outline: none;
background-color: #eee;
background-image: linear-gradient(to top, #fff, #ccc);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
select:hover {
cursor: pointer;
background-color: #ddd;
}
select option {
font-size: 14px;
}

解释一下这段CSS样式的代码： p标签中设置字体样式，接下来是select标签的样式设置，其中： - font-size设置字体大小； - padding设置内边距； - border设置边框，这里选择了无边框； - outline设置轮廓，这里选择了无轮廓； - background-color设置背景颜色； - background-image设置背景图片，这里选择了渐变色； - -webkit-appearance、-moz-appearance和appearance设置下拉框按钮的样式，这里选择了默认的按钮样式； - select::-ms-expand设置在IE中不显示下拉箭头； - select:hover设置鼠标滑过时的背景颜色； - select option设置下拉框中的选项的字体大小。 有了如上的CSS样式设置，我们就为HTML中的select标签添加了一个漂亮的下拉框按钮。