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>
CommentFileSizeAuthor
#5 form_item_radio_class-1285506-5.patch994 bytesnclavaud
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Everett Zufelt’s picture

Version: 7.8 » 8.x-dev
Component: forms system » CSS

Bumping 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.

KrisBulman’s picture

Assigned: Unassigned » KrisBulman
xjm’s picture

Assigned: KrisBulman » Unassigned
KrisBulman’s picture

thanks, was about to do this. I haven't made progress.

nclavaud’s picture

Status: Active » Needs review
Issue tags: +Needs backport to D7
FileSize
994 bytes

Actually I think theme_form_element() is the right place to fix this.

Mukeysh’s picture

joelpittet’s picture

Status: Needs review » Postponed (maintainer needs more info)

Is 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.

joelpittet’s picture

Status: Postponed (maintainer needs more info) » Closed (works as designed)

No response, closing this. If you'd like to work on this feature please re-open for 8.1.x