如何实现特定造型的select下拉框？使用:after伪元素方案失败求思路

首先要明确：大部分浏览器不支持给<select>元素添加:before/:after伪元素，这就是你之前方案失效的核心原因。下面提供两种实用的实现思路，都能复刻你需要的斜切+箭头造型：

思路一：容器包裹法（最常用） #

用一个父容器包裹<select>，通过容器的伪元素实现右侧斜切区域和下拉箭头，让<select>和容器视觉上融为一体。

代码示例 #

<div class="custom-select">
  <select>
    <option value="All" selected="selected">Tout</option>
    <option value="15">2021</option>
    <option value="16">2022</option>
  </select>
</div>

/* 父容器：负责承载伪元素和整体造型 */
.custom-select {
  position: relative;
  width: 150px;
  max-width: 100%;
}

/* 核心select：隐藏默认样式，适配容器 */
.custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 40px 10px 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 1px;
  color: #f9faff;
  background-color: grey;
  border: 1px solid #fff;
  border-right: 0; /* 去掉右侧边框，和伪元素衔接 */
}

/* 右侧斜切箭头区域：用伪元素实现 */
.custom-select::after {
  content: '▼'; /* 用字符做箭头，也可以换成SVG背景图 */
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f9faff;
  font-size: 10px;
  background-color: grey;
  border: 1px solid #fff;
  border-left: 0; /* 去掉左侧边框，和select衔接 */
  /* 斜切效果，角度可根据需求调整 */
  transform: skewX(-15deg);
  transform-origin: top right;
  cursor: pointer;
}

/* 兼容IE的箭头隐藏（可选） */
.custom-select select::-ms-expand {
  display: none;
}

思路二：Clip-path 形状裁剪法 #

如果不需要额外的边框拆分，可以用clip-path给父容器做斜切形状，再把箭头放在容器内的右侧位置。

代码示例 #

<div class="custom-select-clip">
  <select>
    <option value="All" selected="selected">Tout</option>
    <option value="15">2021</option>
    <option value="16">2022</option>
  </select>
  <span class="arrow">▼</span>
</div>

.custom-select-clip {
  position: relative;
  width: 150px;
  max-width: 100%;
  /* 用clip-path裁剪出右侧斜切的形状 */
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 50%, calc(100% - 25px) 100%, 0 100%);
}

.custom-select-clip select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 1px;
  color: #f9faff;
  background-color: grey;
  border: 1px solid #fff;
}

.custom-select-clip .arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #f9faff;
  font-size: 10px;
  pointer-events: none; /* 不干扰select的点击 */
}

关键注意事项 #

• 务必给select添加浏览器前缀的appearance: none，确保隐藏默认下拉箭头；
• 斜切角度、箭头样式、尺寸都可以根据设计需求调整；
• 如果用SVG箭头，直接替换伪元素的content为background-image即可，注意设置background-size和background-position。

内容的提问来源于stack exchange，提问作者cecile