Class cannot be added on input by jQuery

Question

I cannot add a class to this input: enter image description here

Here is the jQuery:

$( ".payment_nr" ).addClass( "highred" );

The HTML:

<div>
<input id="email" class="payment_nr" type="email" placeholder="[email protected]">
</div>

And this is the CSS I want to add:

.highred{
-webkit-appearance: none;
-webkit-box-shadow: 0px 0px 7px 0px rgba(255,0,0,0.66);
-moz-box-shadow: 0px 0px 7px 0px rgba(255,0,0,0.66);
box-shadow: 0px 0px 7px 0px rgba(255,0,0,0.66);
}

The weird think is that if I apply it to the parent it works: enter image description here

$( ".payment_nr" ).parent().addClass( "highred" );

Also if I add pure CSS directly it works: enter image description here

$( ".payment_nr" ).css("background-color","yellow");

Can somebody please help me to add it directly on the input using an external CSS?

CSS specificity, you probably have styles on a more specific selector set, either that or the styles don't do what you think they do — adeneo
– adeneo, Commented Dec 6, 2013 at 22:13
The current input only has another class that only adds the width :/ — user2989327
– user2989327, Commented Dec 6, 2013 at 22:15
You can use your browser's inspector tool to see what styles are being applied. — Jason P
– Jason P, Commented Dec 6, 2013 at 22:15
You present this as a jQuery problem, but I don't think it is. If you (temporarily) change your markup to include class="payment_nr highred" does that work? — nnnnnn
– nnnnnn, Commented Dec 6, 2013 at 22:19

cssyphus · Accepted Answer · 2013-12-06 22:21:48Z

1

I don't intend for this to be an answer, but rather some things for you to try.

Did you see Krishna's jsFiddle in the comments? Is there anything wrong with his example?

You can add the class either to all elements with class payment_nr:

$( ".payment_nr" ).addClass( "highred" );

Or you can add it to only the inputs with class payment_nr:

$( "input.payment_nr" ).addClass( "highred" );

Or you can add it to the ID for that specific input element:

$( "#email" ).addClass( "highred" );

Have you used Chrome's F12 (Developer Tools) to watch the element to see if the class is added or not?

Again: please comment on the jsFiddle that Krishna created in the first comment. Have you see it?

answered Dec 6, 2013 at 22:21

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Class cannot be added on input by jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related