Bootstrap: textarea:focus blue border issue

[jezaman]

Trying to remove the blue border from a textarea that is focussed, i notice that it cannot be done using simply textarea:focus.
This works for other input elements, but for some reason the textarea needs ".form-group" in front like this:

input[type="text"]:focus, .form-group textarea:focus, input[type="email"]:focus {
outline: none;
box-shadow:none !important;
border:1px solid #422918;
}

This seems rather user-unfriendly

[mdo]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

---

_This is a saved reply._

[sigee]

@jezaman
You said it works for other input elements. It is not true, because in your example you wrote something like this:

input[type="text"]:focus{
}

Instead of something like this:

input:focus{
}

In the CSS there are different rules with different strength.
The less specific is the less stronger.
In the above example the input is less specific than input[type="text"]. In the bootstrap the input elements get their outline, box-shadow and border styles agains a class called form-control, that is more specific than a html tag. This is why textarea:focus does not work as you expected.
I guess you can use the class to overwrite the styles like this:

.form-control:focus {
  outline: none;
  box-shadow:none !important;
  border:1px solid #422918;
}

[mdo]

Closing per above comment. Thanks for the analysis @sigee.