Twitter Bootstrap Question posted in

Class css added with jquery not appliyed – Twitter bootstrap

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 ?

Tags:

2

Answers


  1. 0

    This sounds like it may be a CSS specificity problem. If this is your own style rule, try changing it to the following:

    input.form-control.hasError {
    border-color: #a94442;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

    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.

    Login or Signup to reply.
  2. 0

    Fixed JSFiddle: https://jsfiddle.net/z824m656/4/

    I changed your jQuery to:

    $('#yourInput').addClass('hasError');

    And added the id yourInput to, well, your input. Now it works.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search