Bootstrap 4自定义select：为箭头图标与文本添加分隔线

No worries, let's get that left border added to your custom select arrow! Since you're using a background image for the arrow, we can't style the image directly, but a pseudo-element is the perfect workaround here. Here's how to do it:

Updated CSS Solution #

.custom-select {
  position: relative;
  background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
  background-size: 12px 12px;
  /* Adjust right padding to make space for the border and arrow */
  padding-right: 2.5rem;
}

.custom-select::after {
  content: '';
  /* Position the border relative to the select */
  position: absolute;
  right: 1.5rem; /* Align this with your arrow's position */
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: #cccccc; /* Change to your desired border color */
}

How This Works: #

• We first set position: relative on the .custom-select so our pseudo-element can be positioned absolutely against it.
• The padding-right adjustment ensures your select text doesn't overlap with the new border or arrow.
• The ::after pseudo-element creates a thin vertical line (our border) that sits just to the left of your arrow image. Tweak the right, top, and height values to perfectly align it with your arrow and match your design needs.

If you need to adjust the border thickness or color, just modify the width and background-color properties of the pseudo-element.

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