使用 "form control" 删除输入字段的轮廓

Question

我有一个输入字段，如下所示。在 class 名称中，我将其命名为 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: "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;
}

使用 "form control" 删除输入字段的轮廓

Remove outline of input field with "form control"

html

css

input

outline