How to change border color on focus? [closed]

Question

By clicking inside the input field or focus on the input field, how to change the border color.

HTML

<div className="col-md-12">
   <div className="form-group">
      <label for="Street_Address">Street address</label>
      <input type="text" className="form-control" id="Street_Address"  placeholder="" />
   </div>
</div>

CSS

input:focus
{
    border: 1px solid #1670BE;
    box-shadow: 0 0 3px #1670BE;
    outline-offset: 0px;
    outline: none;
}

Answer 1

Try this:

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

---

When the element is focussed, the User Agent (browser) by default sets an outline. So, to prevent it, you need to override it as shown above

Answer 2

try this also.

*:focus {
    outline: none;
}

Answer 3

Sometimes what looks like a border is really a border shadow as in the case of Bootstrap, so you would use:

#myelement:focus {
    box-shadow: none;
}