Search code examples
csswordpressninja-forms

wordpress custom css class

I am attempting to modify the width of the ninja form text inputs on my wordpress site. I am able to call each individually by id with: 

#ninja_forms_field_6 {width:25%; min-width:250px;}

However, I would like to do so by class. However, I can't seem to figure out the correct class to call. I have looked at the source code and it displays: 

<input id="ninja_forms_field_6" data-mask="" data-input-limit="" data-input-limit-type="char" data-input-limit-msg="character(s) left" name="ninja_forms_field_6" type="text" placeholder="First Last" class="ninja-forms-field  ninja-forms-req " value="" rel="6"   />
    <div id="ninja_forms_field_6_error" style="display:none;" class="ninja-forms-field-error">
    </div>

When I've tried to use:

.ninja-field ninja-forms-req {width:25%; min-width:250px;}

Nothing seems to happen. In particular, my css editor doesn't seem to like the space between ninja-field and ninja-forms-req. I've found some other answers that indidcate these are two separate tags, but I still can't seem to get the text inputs to respond to my inputs. I should note that I am using the "Simple Custom CSS" plug-in to make changes to CSS. Any help in advance would be appreciated. Thanks.

Solution

  • Try .ninja-field.ninja-forms-req.

    When targetting multiple CSS classes on the same element you need to separate them with periods.