Hey,
While styling my contact form page, I need to add a container element around the select (dropdown), or modify the <div class="ginput_container"> code where the element contained within is a dropdown.
Is there a hook or filter that would help me to do this, specifically only for dropdown elements?
i.e. The current output looks like:
<li class="gfield gfield_contains_required" id="field_1_4">
<label for="input_1_4" class="gfield_label">Drop Down<span class="gfield_required">*</span></label>
<div class="ginput_container">
<select tabindex="13" class="medium gfield_select" id="input_1_4" name="input_4">
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choice">Third Choice</option>
</select>
</div>
</li>
I need it to look like this:
<li class="gfield gfield_contains_required" id="field_1_4">
<label for="input_1_4" class="gfield_label">Drop Down<span class="gfield_required">*</span></label>
<div class="ginput_container select-wrapper">
<select tabindex="13" class="medium gfield_select" id="input_1_4" name="input_4">
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choice">Third Choice</option>
</select>
</div>
</li>
or this:
<li class="gfield gfield_contains_required" id="field_1_4">
<label for="input_1_4" class="gfield_label">Drop Down<span class="gfield_required">*</span></label>
<div class="ginput_container">
<div class="select-wrapper">
<select tabindex="13" class="medium gfield_select" id="input_1_4" name="input_4">
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choice">Third Choice</option>
</select>
</div>
</div>
</li>
I know this can probably be done with jQuery if not by modifying the output with a hook / filter, but I don't know how to do this.
Any help is greatly appreciated!
James