How to change border color on focus? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 2 years ago.

Improve this 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;
    ou开发者_StackOverflowtline-offset: 0px;
    outline: none;
}

---

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

---

try this also.

*:focus {
    outline: none;
}

---

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

---

input{
        border:none;
    }

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