Bootstrap输入框边框异常问题：默认边框与聚焦内边框故障

问题修复方案 #

1. 解决边框显示不一致的问题

你只设置了border-width，但浏览器默认的border-style和border-color没有被统一覆盖，导致部分边框保留默认样式。直接用border属性统一设置边框的宽度、样式和颜色，就能确保四个边样式完全一致。

2. 移除点击时的内边框（outline）

点击输入框出现的内边框是浏览器默认的:focus状态下的outline样式，通过设置outline: none可以移除它；如果要兼顾可访问性，也可以自定义focus样式来替代默认效果。

修改后的完整代码 #

CSS 部分

.left-align{
    margin-right: 75px;
}
.search-input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    vertical-align:middle;
    margin-left:14px;
    /* 统一设置边框，替代单独的border-width */
    border: 2px solid #ced4da !important;
    /* 移除默认focus内边框 */
    outline: none;
    /* 可选：自定义focus状态样式，兼顾可访问性 */
    &:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }
}

.search-label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 80px;
}

HTML 部分（无需修改）

<div class="d-flex my-2 left-align flex-column gap-2 w-100 ">
    <div class="block">
        <label class="fw-bold search-label" >Warehouse</label>
        <input class="search-input" type="search"/>
    </div>
    <div class="block">
        <label class="fw-bold search-label">Location</label>
        <input class="search-input" type="search"/>
    </div>
    <div class="block">
        <label class="fw-bold search-label">Employee</label>
        <input class="search-input" type="search"/>
    </div>
</div>

关键修改说明 #

• 用border: 2px solid #ced4da !important替代单独的border-width，强制覆盖浏览器默认的边框样式，确保四个边的宽度、样式、颜色完全统一。
• 添加outline: none移除默认的focus内边框；自定义:focus状态的box-shadow和边框颜色，能让用户清晰识别当前聚焦的输入框，避免可访问性问题。

内容的提问来源于stack exchange，提问作者David-JSON