How to add css to form elements if attribute class is already being used in Jquery


Tags: jquery,css

Problem :

This is probably a dumb question - I'm using Jquery to validate the form. So the form elements have the class="required" attribute.

input type="text" name="last_name" class="required"/>

Now if i want to apply some css properties to the input fields of this form - how do I do that.

  • I do not want to declare a general css for all input elements - I have declared the css as follows:
input.form
{
    color: #000;
    background: #fff;
    border: 2px solid #E1E1E1;
    font-size: 16pt;    
    width:150px;
}

And I want to use it this way

input class="form" type="text" name="last_name" class="required"/>

But this wont work as there are two class attributes here. So how do I handle this. Thanks



Solution :

You can add as many classes for each element as you like. In your code you would declare this like:

<input class="form required" type="text" name="last_name" />

Any to apply special CSS rules to input elements only containing the "required" class, just add the following:

input.required
{
    color:#f00;
}

    CSS Howto..

    How to convert html & css to an image?

    How do you close the CSS preview view in Eclipse?

    How to color row on specific value in angular-ui-grid?

    How to make an image hover over another?

    CSS How to make text to scale like an image

    How to Implement this UI with CSS [closed]

    How to @import without including all CSS but just the @extends ones

    How to handle the html and css of one side image and other side content and vice versa

    How to fix the heading in html table using css

    How to wrap between letter and punctuation to avoid extra blank space in the end of line?

    Ionic 2 - how to make ion-button with icon and text on two lines?

    activating “authorization” causes CSS stop working! how solve it?

    How do I make this type of layout with CSS? [closed]

    How can I get a CSS class selector to override the input[readonly] selector?

    How to align my dropdown menu to center of the page?

    How to get rid of “margin”

    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    How to put a image below another?

    How to add event handlers to DIVS with CSS classes containing a particular string?

    CSS: how do I force contents in a table cell to stay on one line when browser size reduced

    How do I do this CSS border-bottom

    How to apply effects to a unicode character in CSS? [closed]

    How to change the background color(on hover) and css(height/width) of a select option?

    How to make a sidebar that stretches to the page length?

    How to make gradually changing background in CSS become uninterruptible?

    How to Automatically Close Alerts using Twitter Bootstrap

    How can I turn the page's font color to green when a button is clicked

    How to delete the gap

    How do I differentiate between two different images in the same class in my CSS file