<select>元素上"向下箭头"的CSS？

在HTML中，<select>元素用于创建一个下拉列表，其中的每个选项由<option>元素表示。要为<select>元素添加一个"向下箭头"的CSS样式，可以使用以下方法：

使用伪元素::after或::before为<select>元素添加一个自定义图标。

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('path/to/your/arrow-icon.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px 16px;
  padding-right: 24px; /* 根据图标大小调整 */
}

使用CSS变量和data-*属性为不同的<select>元素定制不同的箭头图标。

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px 16px;
  padding-right: 24px; /* 根据图标大小调整 */
  --arrow-icon: url('path/to/your/default-arrow-icon.svg');
  background-image: var(--arrow-icon);
}

select[data-icon='icon1'] {
  --arrow-icon: url('path/to/your/icon1.svg');
}

select[data-icon='icon2'] {
  --arrow-icon: url('path/to/your/icon2.svg');
}

在HTML中，为<select>元素添加data-icon属性以选择相应的箭头图标。

 <option>Option 1</option>
 <option>Option 2</option>
</select><select data-icon="icon2">
 <option>Option 1</option>
 <option>Option 2</option>
</select>

这样，你就可以为不同的<select>元素定制不同的箭头图标，而无需依赖第三方库或框架。