如何在 select2 框上应用边框半径？

Question

我有一个默认的 bootstrap 用户 select 框，我在其中应用 border-radius 样式：

<div class="container">
  <select class="form-control" style="border-radius: 1rem;">
    <option value="1">User 1</option>

    <option value="2">User 2</option>

    <option value="3">User 3</option>

    <option value="4">User 4</option>

    <option value="5">User 5</option>

  </select>
</div>

所以，我决定更新此 select 以使用 jQuery 库 select2 来获得搜索功能，但我丢失了边框半径格式。

<div class="container">
  <select class="form-control js-example-basic-single" style="border-radius: 1rem;">
    <option value="1">User 1</option>

    <option value="2">User 2</option>

    <option value="3">User 3</option>

    <option value="4">User 4</option>

    <option value="5">User 5</option>

  </select>
</div> 


$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

当我在 select 框中使用 select2 时，有什么方法可以应用边框半径？

Answer 1

Select2 在原始 select 之后追加另一个元素，因此如果您想要设置样式，可以使用 .select2-container .select2-selection 定位它。更具体地说，如果您只想设置 .js-example-basic-single 的 select2 的样式，则 selector 将是 .js-example-basic-single + .select2-container .select2-selection.

Working Fiddle

如何在 select2 框上应用边框半径？

How to apply border-radius on select2 boxes?

html

css

jquery

jquery-select2

bootstrap-4