CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2989327
user2989327

Reputation: 75

Class cannot be added on input by jQuery

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?

Upvotes: 1

Views: 122

Answers (1)

cssyphus
cssyphus

Reputation: 40038

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?

Upvotes: 1

Related Questions