When creating a form with radios as an input the "input" HTML tag is assigned a unique id, however the divs surrounding each pair of input and label tags are all assigned identical classes ("form-item form-type-radio form-item-extension-settings-region" in the code below). I would like to see these wrapper divs assigned an unique class so they are selectable with CSS.
The output of my form is as follows:
<label for="edit-extension-settings-region">
Current Site Region <span class="form-required" title="This field is required.">*</span>
</label>
<div id="edit-extension-settings-region" class="form-radios">
<div class="form-item form-type-radio form-item-extension-settings-region">
<input id="edit-extension-settings-region-1" name="extension_settings_region" value="1" checked="checked" class="form-radio" type="radio">
<label class="option" for="edit-extension-settings-region-1">
<span class="radio-label">North West</span>
</label>
</div>
<div class="form-item form-type-radio form-item-extension-settings-region">
<input id="edit-extension-settings-region-2" name="extension_settings_region" value="2" class="form-radio" type="radio">
<label class="option" for="edit-extension-settings-region-2">
<span class="radio-label">North Central</span>
</label>
</div>
<div class="form-item form-type-radio form-item-extension-settings-region">
<input id="edit-extension-settings-region-3" name="extension_settings_region" value="3" class="form-radio" type="radio">
<label class="option" for="edit-extension-settings-region-3">
<span class="radio-label">North East</span>
</label>
</div>
<div class="form-item form-type-radio form-item-extension-settings-region">
<input id="edit-extension-settings-region-4" name="extension_settings_region" value="4" class="form-radio" type="radio">
<label class="option" for="edit-extension-settings-region-4">
<span class="radio-label">South West</span>
</label>
</div>
<div class="form-item form-type-radio form-item-extension-settings-region">
<input id="edit-extension-settings-region-5" name="extension_settings_region" value="5" class="form-radio" type="radio">
<label class="option" for="edit-extension-settings-region-5">
<span class="radio-label">South Central</span>
</label>
</div>
<div class="form-item form-type-radio form-item-extension-settings-region">
<input id="edit-extension-settings-region-6" name="extension_settings_region" value="6" class="form-radio" type="radio">
<label class="option" for="edit-extension-settings-region-6">
<span class="radio-label">South East</span>
</label>
</div>
</div>
<div class="description">Select the geographical region of the current website.</div>
Comment | File | Size | Author |
---|---|---|---|
#5 | form_item_radio_class-1285506-5.patch | 994 bytes | nclavaud |
Comments
Comment #1
Everett Zufelt CreditAttribution: Everett Zufelt commentedBumping to 8.x since changes happen in dev branch first.
This wouldn't be too hard to patch in theme_radios(), or theme_radio() but we should make sure that we're doing it consistently for all form elements.
Comment #2
KrisBulman CreditAttribution: KrisBulman commentedComment #3
xjmComment #4
KrisBulman CreditAttribution: KrisBulman commentedthanks, was about to do this. I haven't made progress.
Comment #5
nclavaud CreditAttribution: nclavaud commentedActually I think theme_form_element() is the right place to fix this.
Comment #6
Mukeysh CreditAttribution: Mukeysh commented5: form_item_radio_class-1285506-5.patch queued for re-testing.
Comment #7
joelpittetIs this actually useful, can you give some common example use-cases where this will help in which another CSS selector couldn't do the trick?
If the use-case isn't super common need then a couldn't a hook_template_preprocess override in your theme do the trick to add the extra class?
I'd like to limit the selectors to the bare minimum, also the amount of wrapper divs that drupal 8 ships with.
Comment #8
joelpittetNo response, closing this. If you'd like to work on this feature please re-open for 8.1.x