css - 在选择中的箭头图标和文本之间添加分隔符

Question

我正在尝试构建一个选择菜单，我正在使用 Bootstrap 4。我替换了背景以替换选择元素中的箭头图标，但现在我需要为该图像添加左边框，但我还是找不到。

作为引用，我附上了所需内容的图片

这就是我到目前为止所取得的成就

和我到目前为止所做的代码 HTML

<select class="custom-select">
  <option disabled>Choose 1</option>
  <option>another</option>
  <option>2</option>
</select>

这是我的 CSS

.custom-select {
  background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
  background-size: 12px 12px;
}

Answer 1

您也可以在背景中为 line 使用另一个图像，或者制作 arrow 和 line 的组合图像

堆栈片段

.custom-select {
  background: url("https://image.flaticon.com/icons/png/128/118/118738.png") no-repeat right 0.75rem center, url("http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_low_line_uFE33_icon_128x128.png") no-repeat right 2rem center;
  background-size: 12px 12px;
  width: 300px;
  height: 40px;
  -webkit-appearance: none;
  position: relative;
  padding: 0 10px;
}

<select class="custom-select">
  <option>1</option>
  <option>1</option>
  <option>1</option>
  <option>1</option>
  <option>1</option>
</select>