使用“表单控件”删除输入字段的轮廓

Question

我有一个如下所示的输入字段。在班级名称中，我将其命名为form-control

<input ref={englishTypeRef} className="form-control p-3 settings-input" placeholder={dbData ? dbData.englishType : null}/>

每当我专注于这个领域时，我都会在边框周围看到一个蓝色轮廓。 所以在我的设置输入中我使用outline:none

.settings-input{
    ...
}
.settings-input:focus {
    outline:none;
}

但焦点上的蓝色边框保持不变。我怎样才能删除它？

引导程序："bootstrap": "^5.0.2"

Answer 1

尝试像这样覆盖表单控件样式：

.form-control:focus {
  border-color: #ced4da; /* default B5 color or set your own color*/
  border: none !important; /* if you want to remove borders at all*/
  outline: none !important;
  box-shadow: none !important;
}