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

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;
}