Unable to apply CSS styles to parent elements of required fields


#1

Markup for a required form field is as follows:

<div class="hs_email field hs-form-field">
  <label>
    <span>Email</span>
    <span class="hs-form-required">*</span>
  </label>
  <div class="hs-field-desc"></div>
  <div class="input">
    <input class="hs-input" name="email" placeholder="" required="" type="email" value="dhunt@hubspot.com">
  </div>
</div>

I need to apply styles to the .input div of a required field, the same way as I could to an email field using .hs_email .input as a selector. As of now it is not possible to target required fields except the input itself or the span inside the label.

A class on the parent element like .hs-required would be very convenient. Selecting by ID is not practical for my use case as there are multiple required fields in multiple forms. Is there a way to work around this?


#2

Hi @asarna,

When the field isn’t passing validation (i.e. it’s not filled out) you can use the following selector to apply styling:
.hs-form input:focus:required:invalid The following designer doc has some more information on form markup:


#3

Thank you, but what I ultimately need to do is put styling on the parent of the required input, not the input element itself. Are there plans at any point in the future to add a class to the parent of a required input?


#4

Hi @asarna,

I’m not aware of any plans to change the form markup, but the direct parent of an input element is a div with the class input, as seen in the Sample form markup above:

            <label data-reactid=".0.1:$0.1:$firstname.0" for=
               "firstname-d9629729-b734-4866-a8e7-531b479446b0_4033"><span data-reactid=".0.1:$0.1:$firstname.0.0">
            First Name</span></label>
            <div class="hs-field-desc" data-reactid=
               ".0.1:$0.1:$firstname.1" style="display:none;"></div>
            <div class="input" data-reactid=
               ".0.1:$0.1:$firstname.$firstname">
               <input class="hs-input" data-reactid=
                  ".0.1:$0.1:$firstname.$firstname.0" id=
                  "firstname-d9629729-b734-4866-a8e7-531b479446b0_4033"
                  name="firstname" placeholder="" type="text">
            </div>