Menu
I'd like to remove the blue outline from my contact box (the color clashes with the other colors on my page). I tried a bunch of things suggested on SO questions to no avail and get the same result on Chrome and Firefox.
Here's what I tried:
input:focus, button:focus, textarea:focus, textarea:focus, input:active, button:active, textarea:active, input:active, input, textarea, button {
outline-style: none !important;
outline: none !important;
outline: 0 !important;
border: 1px solid #17a2b8; /* Turquoise color */
}
Result:
771
Answer: Use CSS outline propertyIn Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .
Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. Methods to remove it such as onfocus="blur()" result in keyboard users being unable to interact with the link or control.
It's a box-shadow style applied on focus.
add this code to remove it:
.form-control:focus {
box-shadow:none;
}
You may add !important depending on your CSS order:
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
