css下拉框怎么设置的

CSS下拉框是网页设计中经常使用的一个元素，它可以让用户通过点击下拉框选择不同的选项。下面我们将简单介绍如何设置一个CSS下拉框。

/* CSS样式 */
.select-box {
  width: 200px;
  position: relative;
}

.select-box select {
  padding: 8px 15px;
  width: 100%;
  border: none;
  box-shadow: none;
  background-color: #e9e9e9;
  -webkit-appearance: none; /* 去掉默认样式 */
  -moz-appearance: none;
  appearance: none;
  position: relative;
}

.select-box:after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome; /* 添加字体图标 */
  content: "f078"; /* 上箭头 */
}

.select-box:before {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  content: "f077"; /* 下箭头 */
}

.select-box select::-ms-expand {
  display: none; /* 去掉IE默认下拉箭头 */
} 

首先，我们需要在HTML中创建一个标签，并添加对应的选项，如下所示：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
</select> 

接着，在CSS中，我们给包裹标签的标签设置一个相对定位的position，并设置标签的样式：

.select-box {
  width: 200px;
  position: relative;
}

.select-box select {
  padding: 8px 15px;
  width: 100%;
  border: none;
  box-shadow: none;
  background-color: #e9e9e9;
  -webkit-appearance: none; /* 去掉默认样式 */
  -moz-appearance: none;
  appearance: none; /* 去掉默认样式 */
  position: relative;
} 

接下来，我们需要添加一个上箭头的字体图标，以及一个下箭头的字体图标，并把它们分别放在标签的前后位置：

.select-box:after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome; /* 添加字体图标 */
  content: "f078"; /* 上箭头 */
}

.select-box:before {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  content: "f077"; /* 下箭头 */
} 

最后，我们还需要去掉IE浏览器默认的下拉箭头：

.select-box select::-ms-expand {
  display: none; /* 去掉IE默认下拉箭头 */
} 

到这里，CSS下拉框的设置就完成了。当用户点击下拉框时，会出现选项供用户选择，并且在选择后会自动关闭。如果想要实现下拉框不自动关闭，可以使用JavaScript来实现。