i have a simple twitter-bootstrap 3 input text :
<input type="text" class="form-control" placeholder="Search for...">
with jquery i add a (hasError
) class to put border color with red , this is hasError
Class :
.hasError{
border-color: #a94442;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
the class is added but its not appliyed , i think that class (form-control
) has more priority .. how can i resolve this please ?
2
Answers
This sounds like it may be a CSS specificity problem. If this is your own style rule, try changing it to the following:
If you are using the built-in styling from bootstrap, you need to apply the has-error class to the parent element for the error styling to take effect.
Fixed JSFiddle: https://jsfiddle.net/z824m656/4/
I changed your jQuery to:
And added the
id
yourInput
to, well, your input. Now it works.