如何删除默认边框半径Select2

Question

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

Answer 1

您可以添加此css：

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

小提琴：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

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

我使用的是Ruby on Rails 5.2.0，我觉得任何JQuery或JavaScript解决方案都会有点骇人听闻，并且事后尤其如此，因为它应该可以在原始CSS中使用-但我觉得使用CSS !important标签不是最佳做法。不要试图对任何人用力擦！

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

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

Answer 4

将此添加到您的HTML标头：

<svg viewBox="0 0 350 40" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" font-size="32" font-family="Courier New">
    First
    <tspan font-size="8" font-family="Courier New" fill="blue" text-anchor="right">Second</tspan>
    <tspan font-size="12" font-family="Comic Sans MS" fill="red">Third</tspan>
    Fourth
  </text>
</svg>

Answer 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文件。

此致

本