如何在引导程序 4 自定义选择中完全隐藏双箭头

Question

已经给出了有关如何隐藏 bootstrap 4 自定义选择字段右侧的双箭头的答案，如 here 所示。生成的选择框仍将右侧的文本隐藏在现在不透明的箭头后面。我希望能够在为移动设备设计的显示器上使用与左侧一样多的右侧空间。换句话说，可以进行哪些额外的更改以使文本在选择框的最右侧可见。您可以通过调整屏幕宽度来查看问题。

.custom-select{
background-image: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="col-8">
    <div class="input-group">
      <select class="custom-select">
        <option>end of text string will hide behind opaque double arrow around here</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>
  

Answer 1

这是一个填充问题。使用 'padding-right' 减少空格。

.custom-select{
background-image: none !important;
padding-right:5px !important; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="col-8">
    <div class="input-group">
      <select class="custom-select">
        <option>end of text string will hide behind opaque double arrow around here</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>
  

注意：5px 只是一个示例，您可能需要确保左右内边距匹配。