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