重点：永远在课堂之上

Question

I have a class and I have some validation (no non-numbers allowed (which is not here, but I capture it on the keypress method)). However, if I have a class with focus: , it is always on the top level of css and I cannot override the settings temporarily. Is there a way to solve this?

In this

JSFiddle

I am expecting red border to come out immediately on the first keypress , however it is overridden with focus and only appears when I focus out.

Answer 1

You can modify the class like this:

.a {
    border:1px solid red !important;
}

!important will override the focus css.

Demo: Fiddle

Answer 2

Change your css | Demo

.a{
    border:1px solid red !important;
}

and script , if you want to remove red border if user is out of focus of input box

   $('input').on("keypress", function(){
    $(this).addClass('a');

    });
    $('input').on("blur", function(){
    $(this).removeClass('a');

    })

Answer 3

Have you tried to add the !important statement? Try something like this:

input:focus{
    border:1px dashed yellow;
}

On JS you can do:

$(input).keypress(function(ev){
    var target = ev.target;
    $(target).css({
        borderColor: '#AA0000 !important'
    });
}