HTML输入框添加清除按钮后边框样式不一致，如何设置双边圆角？

问题出在Bootstrap的默认样式上：.input-group 和 .btn-group 这类组件会自动调整子元素的边框圆角，让相邻元素的边框合并，所以你的输入框右侧圆角被强制去掉了。

直接用下面的方法修改：

1. 调整HTML结构 #

移除多余的.btn-group，避免样式冲突：

<div class="input-group has-clear">
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    <span id="searchclear3"
       class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear"
       style="pointer-events:auto; text-decoration:none; cursor:pointer;"
       onclick="$(this).prev('input').val('');return false;">
    </span>
</div>

2. 添加自定义CSS #

强制让输入框保持两侧圆角，同时调整清除按钮的位置避免重叠：

/* 确保输入框两侧都有圆角 */
.input-group.has-clear .form-control {
    border-radius: 0.25rem !important; /* 这里用Bootstrap默认的圆角值，也可以改成你需要的数值 */
}

/* 调整清除按钮的位置，不遮挡输入框右侧 */
.input-group.has-clear .form-control-clear {
    right: 10px;
}

这样修改后，输入框的左右两侧就都会显示圆角样式了。

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