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

Time:08-12

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

<form id="forminator-module-4712"  method="post" data-forminator-render="0" data-form-id="4712" novalidate="novalidate">
    <div >
        <div id="email-1" >
            <div ><input type="email" name="email-1" value="" placeholder="Email address" id="forminator-field-email-1"  data-required="true" aria-required="true">
            </div>
        </div>
    </div>
    <div >
        <div id="checkbox-1" >
            <div role="group"  aria-labelledby="forminator-checkbox-group-62f1212b1309c-label">
                <label for="forminator-field-checkbox-1-1-62f1212b1309c"  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  aria-hidden="true"></span><span >I'd like my free gift!</span></label>
            </div>
        </div>
    </div>
        <input type="hidden" name="referer_url" value="">
        <div >
            <div >
                <div >
                    <button >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.

CodePudding user response:

I just needed element element selectors, this works:

#forminator-module-4712 input{}

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

  • Related