如何将Input Group内Select2组件的border-radius设置为0？

要去掉Input Group中Select2组件的圆角，你可以使用以下CSS代码：

/* 基础状态去掉圆角 */
.input-group .select2-container.select2-container--default .select2-selection--single {
    border-radius: 0 !important;
}

/* 聚焦状态也去掉圆角（可选，根据需求添加） */
.input-group .select2-container.select2-container--default.select2-container--focus .select2-selection--single {
    border-radius: 0 !important;
}

原有代码不生效的原因 #

你的选择器存在两个核心问题：

1. 层级关系错误：.select2-container>.select2-container--default 表示select2-container--default是select2-container的子元素，但实际这两个类是同一个span元素上的类，应该用.连接（.select2-container.select2-container--default）来选择同时拥有这两个类的元素。
2. 多余的伪类限制：:not(:first-child):not(:last-child)缩小了选择范围，但我们需要直接选中Select2的选择框容器，不需要这个过滤条件。

添加!important是为了覆盖Select2自带的高优先级默认样式，确保自定义样式能生效。

内容的提问来源于stack exchange，提问作者ToanBD