如何去掉默认的边框半径，Select2

Question

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

Answer 1

你可以添加这个css:

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

fiddle : http://jsfiddle.net/jEADR/1537/

Answer 2

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

初始化 select2

后执行以下 2 行

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

Answer 3

打开位于 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 文件。

此致

本

Answer 4

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

我在 Rails 5.2.0 上使用 Ruby，我觉得任何 JQuery 或 JavaScript 解决方案都感觉有点老套，而且在-事实上，特别是因为它应该在香草 CSS 中可行 - 但我觉得使用 CSS !important 标签不是最佳实践。不试图攻击任何人！

所以，我的CSS如下，效果很好！

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

Answer 5

将此添加到您的 HTML Header:

<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>

如何去掉默认的边框半径，Select2

How to remove the default border radius ,Select2

javascript

jquery

css

jquery-select2