Question

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

[！[在此处输入图像说明] [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;

当使用百分比（％）作为宽度时，作者必须意识到百分比基于元素的父元素，或者换句话说，基于元素的父元素包含块的宽度。如果您的父级设置为480px - as 通过我们的演示证明 - 然后百分比基于该值。所以在我们的例子中，50％的480px给我们留下240px的计算像素值。

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.

选择菜单显示不正确

1 个答案: