Search code examples
htmlcssinputoutline

Remove outline of input field with "form control"

I have an input field as shown below. And in the class name I have it as form-control

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

Whenever I focus into this field, I get a blue outline around the borders. So In my settings-input I use outline:none

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

But the blue border on focus remains the same. How can I remove this?

Bootstrap: "bootstrap": "^5.0.2" enter image description here

Solution

  • Try overriding form-control styles like this:

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