CODEWITHSUNDEEP
htmlcssformscss-selectors
truba
truba

Reputation: 35

How to select input elements in form when only form id is unique?

I have the following form (using Forminator plugin) and I want to style it.

<form id="forminator-module-4712" class="forminator-ui forminator-custom-form forminator-custom-form-4712 forminator-design--default  forminator_ajax" method="post" data-forminator-render="0" data-form-id="4712" novalidate="novalidate">
    <div class="forminator-row">
        <div id="email-1" class="forminator-col forminator-col-12  popup-email-field">
            <div class="forminator-field"><input type="email" name="email-1" value="" placeholder="Email address" id="forminator-field-email-1" class="forminator-input forminator-email--field" data-required="true" aria-required="true">
            </div>
        </div>
    </div>
    <div class="forminator-row">
        <div id="checkbox-1" class="forminator-col forminator-col-12  popup-checkbox">
            <div role="group" class="forminator-field" aria-labelledby="forminator-checkbox-group-62f1212b1309c-label">
                <label for="forminator-field-checkbox-1-1-62f1212b1309c" class="forminator-checkbox" title="I'd like my free gift!"><input type="checkbox" name="checkbox-1[]" value="TRUE" id="forminator-field-checkbox-1-1-62f1212b1309c" data-calculation="0" checked="checked"><span class="forminator-checkbox-box" aria-hidden="true"></span><span class="forminator-checkbox-label">I'd like my free gift!</span></label>
            </div>
        </div>
    </div>
        <input type="hidden" name="referer_url" value="">
        <div class="forminator-row forminator-row-last">
            <div class="forminator-col">
                <div class="forminator-field">
                    <button class="forminator-button forminator-button-submit popup-submit">Sign Up</button>
                </div>
            </div>
        </div>
</form>

The problem is, that I have another forminator form on the same site which I styled already.

I want to style the above form differently, but the element names (for buttons and inputs) are not unique.

Is there any way to select specific elements using CSS but in a unique way, so the styles are only applied to this specific form? How would I select email/submit button/etc on this form in a unique way?

I tried the following (but I'm missing something):

#forminator-module-4712 input.forminator-input[type="text"]
#forminator-module-4712 input#forminator-field-email-1

And other combinations.

Upvotes: 2

Views: 987

Answers (1)

truba
truba

Reputation: 35

I just needed element element selectors, this works:

#forminator-module-4712 input{}

Source: https://www.w3schools.com/cssref/sel_element_element.asp

Upvotes: 1

Related Questions