css - 选择菜单未正确显示

Question

我使用的是 Bootstrap ，我使用的是带有类 .form-group 的选择菜单，但在某些浏览器中，选择看起来不同，所以我创建了一个自定义选择菜单。但它不能正常工作，例如在大型设备中有很多空间但选择菜单的文本被隐藏，因为选择菜单很小，就像它出现在图像中:

[![在此处输入图片描述][1]][1]

你知道如何解决这个问题吗？

工作示例:https://jsfiddle.net/gLgv8n3q/

CSS:

<div class="container test  py-4">
  <div class="row">
    <div class="col d-flex align-items-center">
      <h1 class="w-100 mr-auto my-0 h5 text-heading-blue font-weight-bold">Search </h1>
      <form class="mr-2">
        <select class="form__select font-size-xsm font-weight-normal text-gray" id="">
          <option selected class="selected">Order By P0</option>
          <option>i1</option>
          <option>i2</option>
        </select>
      </form>
      <form class="mr-2">
        <select class="form__select font-size-xsm font-weight-normal text-gray" id="">
          <option selected class="selected">Order By P1</option>
          <option>i1</option>
          <option>i2</option>
        </select>
      </form>
      <form class="mr-2">
        <select class="form-control font-size-xsm font-weight-normal text-gray" id="">
          <option selected class="selected">Order By P2</option>
          <option>i1</option>
          <option>i2</option>
        </select>
      </form>
    </div>
  </div>
</div>

Answer 1

您需要更改 form_select 上的填充设置，因为填充太多，它会盖住文本。当您使用百分比宽度时，我还将宽度更改为 width:150px;

When using percentage (%) for width, authors must be aware that the percentage is based on the element's parent, or in other words, the width of the containing block. If your parent is set at 480px - as demonstrated by our demo - then the percentage is based on that value. So in our case 50% of 480px leaves us with 240px as a computed pixel value.

https://css-tricks.com/almanac/properties/w/width/

.form_select{    
  /*width: 100%;*/
  width: 150px;
  display: block;
  /*padding: 0.5rem 1rem;*/
  padding:0;

  background-size: .9rem;
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  background-color: $white;
  background-image: url(img/png.svg);

  font-smoothing: antialiased;
  outline: none;
  appearance: none;

  border: 1px solid red;
  background-clip: padding-box;
  border: 1px  solid green;
  border-radius: 4px;

  transition: all .2s ease;

  line-height: 1.5;
}

Working fiddle here.