css三角形下拉选择

CSS三角形下拉选择是一种常见的UI效果，它可以在交互中带来良好的体验。下面是一份示例代码：

.select-wrap {
  position: relative;
  display: inline-block;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 8px 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  font-weight: normal;
  color: #333;
}

.select-wrap:before {
  content: ';
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #999;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  pointer-events: none;
} 

上面的代码创建了一个具有下拉箭头的选择框。关于这里的“pointer-events: none;”属性，它是为了让三角形部分不响应鼠标事件，避免用户误操作。

需要注意的是，这种效果只适用于现代浏览器。对于IE等老旧浏览器，需要进行兼容性处理。