如何删除默认边框半径，Select2答案

【问题标题】：How to remove the default border radius ,Select2如何删除默认边框半径，Select2
【发布时间】：2015-07-08 18:42:20
【问题描述】：

我正在使用https://select2.github.io/examples.html，但我不想要边框半径。如何删除边框半径以制作搜索框以及滑动区域？

【问题讨论】：

你有没有尝试过做这份工作？
查找 border-top-left-radius、border-bottom-left-radius 和 border-top-right-radius CSS 规则并进行相应修复。

标签： javascript jquery css jquery-select2

【解决方案1】：

你可以添加这个css：

[class^='select2'] {
  border-radius: 0px !important;
}

小提琴：http://jsfiddle.net/jEADR/1537/

【讨论】：

这也适用于css & scss

【解决方案2】：

好吧，我只是尝试在 jquery 中做一个技巧，如下所示，是的，它有效！

初始化select2后执行以下两行

$('.select2-selection').css('border-radius','0px')
$('.select2-container').children().css('border-radius','0px')

【讨论】：

【解决方案3】：

我非常感谢这个帖子中的所有答案，因为它们帮助我找到了一个好的解决方案。

我正在使用 Ruby on Rails 5.2.0，我觉得任何 JQuery 或 JavaScript 解决方案都感觉有点笨拙和事后诸葛亮，特别是因为它应该在原版 CSS 中是可行的 - 但我觉得使用 CSS !important 标签不是最佳实践。不是想欺负任何人！

所以，我的 CSS 如下，并且运行良好！

.select2-container--bootstrap .select2-selection{
  border-radius: 0px;
}

【讨论】：

【解决方案4】：

将此添加到您的 HTML 标头中：

<style type="text/css">
   .select2-container {
       box-sizing: border-box;
       display: inline-block;
       margin: 0;
       position: relative;
       vertical-align: middle;
   }

   .select2-container .select2-selection--single {
       box-sizing: border-box;
       cursor: pointer;
       height: 28px;
       user-select: none;
       -webkit-user-select: none;
       display: contents;
   }
</style>

【讨论】：

【解决方案5】：

打开位于 dist/css/select2.min.css 的文件 select2.min.css。找到您要更改的边界半径。示例将“border-radius:4px”更改为“border-radius:0px”

下面 select2.min.css 中的一段代码

.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051;}

快速浏览 CSS 后，我可以看到 11 个“border-radius:4px”将每个更改为“border-radius:0px”，或者将这些更改为您想要的区域。检查 CSS 文件。

问候

本

【讨论】：

可能不想自己操作原始的 css 文件，因为这会影响所有未来的行为。我建议之后使用额外的 css 命令或在页面加载后通过 javascript 修改 DOM。