Add field-type-specific class to .mktoFieldWrap in Forms | Community
Skip to main content
corypark
New Participant
November 4, 2021
New

Add field-type-specific class to .mktoFieldWrap in Forms

  • November 4, 2021
  • 2 replies
  • 2238 views

The only class that is specific to the field type is on the input element itself, but I want to style the LABELS of the inputs differently depending on the type. I could probably even manage if I could switch the label in the DOM to come AFTER the input using input[type=...] ~ label... but you know what would be easier??... including a class on the wrapper... PLEASE!!

e.g.

<div class="mktoFieldWrap MKTO-FIELD-SELECT"> ← ADD A NEW CLASS HERE!!! <label for="foo" id="Lblfoo" class="mktoLabel mktoHasWidth" style="width: 100px;"> Select one:</label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div> <select id="foo" name="bar" aria-labelledby="Lblfoo" class="mktoField mktoHasWidth mktoValid" style="width: 150px;" aria-invalid="false"> <option value="">Select...</option> <option value="foo">Foo</option> <option value="bar">Bar</option> </select> <span id="foo" tabindex="-1" class="mktoInstruction"></span> <div class="mktoClear"></div> </div>

 

2 replies

corypark
coryparkAuthor
New Participant
November 4, 2021

UPDATE:

My research (quite randomly) led me to (yet another)  hack  solution for this issue by none other than the ultimo Marketo hackster himself, @sanfordwhiteman !

https://blog.teknkl.com/tagging-labels-with-input-types-for-styling/

Thanks again Sanford! Is this such a "rare need"? Seems pretty common to me... like thank you messages, and multiple forms on a single page (both of which I've had to use variations of #sanfordHacks) I've been quite surprised at how thoughtlessly forms have been implemented in Marketo 😕😕👎

corypark
coryparkAuthor
New Participant
November 4, 2021

mktoFieldSelect

mktoFieldText

mktoFieldEmail

mktoFieldPhone

mktoFieldNumber

etc.