为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

aluckdog 2023-01-06 11:03:13

已经给出了如何隐藏 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>

  


查看完整描述

1 回答

?
哆啦的时光机

TA贡献1550条经验 获得超6个赞

这是一个填充问题。使用 '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 只是一个示例,您可能希望确保左右填充匹配。



查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信