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

Question

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

作为参考，我附上了所需要的图像

这是我迄今取得的成就

和我迄今为止所做的代码 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

的合并图片

Stack Snippet

.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>

Answer 2

我建议你将select包装在一个div中并添加一个after到它

<div class="select-wrapper">
  <select class="custom-select"></select>
</div>

然后，在CSS中添加带有后面的箭头

.select-wrapper {
  position: relative;
  background: #fff;
  z-index: 1;
}

.select-wrapper select {
  background: transparent;
}

.select-wrapper:after {
  position: absolute;
  z-index: -1;
  top: 2px;
  right: 0;
  bottom: 2px;
  width: 12px;
  background: #fff url("/assets/rogers/images/down-arrow.png") no-repeat right 0.75rem center;
  background-size: 12px 12px;
  border-left: 1px solid #ddd;
}

我无法测试代码，因为您没有共享HTML，所以我只给了您一个示例。

或者您可以将线条添加到箭头图像

Answer 3

将select包含在另一个DIV中（例如custom-select-wrapper）并使用CSS伪造元素作为边框...

https://www.codeply.com/go/edxDmWNLx6

<div class="custom-select-wrapper">
  <select classs="custom-select">
    <option>opt1</option>
    <option>opt2</option>
    <option>opt3</option>
  </select>
</div>

CSS

.custom-select-wrapper {
 position: relative
}
.custom-select-wrapper:after {
  border-left: 2px solid #ccc;
  content:"\00a0";
  position: absolute;
  top: 0;
  right: 46px;
  z-index: 2;
  display:block;
  height: 38px;
}