如何在 bootstrap 4 自定义选择中完全隐藏双箭头

Question

已经给出了如何隐藏 bootstrap 4 自定义选择字段右侧的双箭头的答案，如此处所示。生成的选择框仍将右侧的文本隐藏在现在不透明的箭头后面。我希望能够使用与左侧一样多的右侧空间来显示专为移动设备设计的显示器。换句话说，可以进行哪些额外的更改以使文本在选择框的最右侧可见。您可以通过调整屏幕宽度来查看问题。.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 只是一个示例，您可能希望确保左右填充匹配。