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

Posted 2023-05-07

【中文标题】如何在 select2 框上应用边框半径？

【英文标题】：How to apply border-radius on select2 boxes?

【发布时间】：2021-09-11 05:03:35

【问题描述】：

我有一个默认引导用户选择框，我在其中应用 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>

因此，我决定更新此选择以使用 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();
);

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

【参考方案1】：

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

Working Fiddle

【讨论】：

完美运行！谢谢