css下拉框加图标

下拉框是网页中常见的选项框类型之一，可以方便用户选择需要的内容。在网页设计中，我们可以通过CSS来美化下拉框并添加图标，使其更加美观。下面是一个简单的实现方法。
首先，我们需要创建一个下拉框的HTML代码如下所示：

<select name="menu">
  <option value="home">主页</option>
  <option value="about">关于我们</option>
  <option value="contact">联系我们</option>
</select> 

可以看到，我们创建了一个具有三个选项的下拉框。下面，我们可以使用CSS来美化它。具体步骤如下：
### 1. 隐藏下拉框的默认样式
使用CSS将下拉框的默认样式隐藏。我们可以使用如下样式代码：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("arrow.png") no-repeat scroll right center transparent;
} 

使用上述代码，我们将下拉框的默认样式隐藏，并通过'background'属性将箭头图片添加到右侧。
### 2. 设定下拉框的样式
我们可以使用CSS样式来设定下拉框的样式，包括边框、字体、大小等。例如：

select {
  width: 200px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
} 

使用上述代码，我们设定下拉框的宽度为200px，设置内容填充为5px，字体大小为16px，边框样式为1px宽的实线灰色。
### 3. 美化下拉框的选项
我们可以使用CSS选择器样式来为下拉框中的选项设置样式。例如：

select option {
  padding: 5px;
  font-size: 16px;
  background-color: #f2f2f2;
} 

使用上述代码，我们设定下拉框中所有选项的填充为5px，字体大小为16px，背景颜色为#f2f2f2。
到这里，我们已经成功地对下拉框进行了美化，并且添加了一个箭头图标。通过CSS的多重样式设定方法，我们可以轻松地自定义下拉框的样式和美观度，达到自己的设计需求。