css+html实现一个下拉的图标

可以使用 HTML 中的 select 元素和 CSS 中的伪类实现一个下拉的图标，具体代码如下：

HTML 代码：

<div class="dropdown">
  <select>
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
</div>

CSS 代码：

/* 隐藏下拉箭头 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("down-arrow.png") no-repeat right center;
  background-size: 15px;
  padding-right: 20px;
  border: none;
  outline: none;
}

/* 添加下拉箭头样式 */
select::-ms-expand {
  display: none;
}

通过设置 select 元素的背景属性为包含下拉箭头的图片，然后通过 padding-right 属性设置图片和 select 元素的间距，即可实现一个下拉的图标。同时，通过设置 -webkit-appearance、-moz-appearance 和 appearance 属性为 none，可以去掉不同浏览器自带的下拉箭头。