I have a List (text) field on a comment type. This field is required and only one option may be chosen, so a radio button is how it will be rendered. I would now like to change the way the radio buttons are rendered to allow for additional necessary styling. I have never done this before.
Currently each element is styled as such:
<div id="edit-field-list" class="form-radios"><div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-field-list form-item-field-list"> <input data-drupal-selector="edit-field-list-1" type="radio" id="edit-field-list-1" name="field_list" value="1" class="form-radio"> <label for="edit-field-list-1" class="option">Item #1</label> </div>
But, let's say that I wanted to add an HTML element inside this
<div> or move one around. I have created a module which adds a widget for this field type. Once this widget is selected, I have tried modifying the field using a number of different methods, but to no avail. I have been making sure to regularly clear the cache since I have been using the
.module file and a template.
I've tried using a template file,
radios.html.twig and adding it using various hooks, such as
hook_theme(). I've tried using
I have never modified the rendering of an element like this before and the documentation all seems to be different enough from what I am trying to do so as to only add confusion.
Could anyone please tell me how to accomplish this? I'm happy to add clarification as needed.
Additionally, is using a Field Widget the best way to accomplish this? It seems the correct way to me, since I only want it to affect the input element on the comment creation/edit form, but I'm open to being wrong.