When using Element UI radio buttons on a form, I am attempting to personalize the label for each selection. Each radio button includes a prop called "label" where I can input my label text successfully. The problem arises when I need to apply a different style to part of the label text. Is this achievable?
For example: label="Morning (9 AM - 12 PM)", I would like to have the ability to style the time differently from "Morning". Something like
label="Morning <span>(9 AM - 12 PM)</span>" <el-form-item
prop="selfBestTimeToContact"
class="form-item--radio form-item--radio--radio-adjacent"
:show-message="false"
>
<el-radio-group
v-model="formData.selfBestTimeToContact"
ref="selfBestTimeToContact"
>
<ol>
<li class="radio-list-item">
<el-radio
id="selfBestTimeToContactMorning"
label="Morning (9 AM - 12 PM)"
name="selfBestTimeToContact"
class="radio--bold"
/>
<p>Test</p>
</li>
<li class="radio-list-item">
<el-radio
id="selfBestTimeToContactAfternoon"
label="Afternoon (12 PM - 5 PM)"
name="selfBestTimeToContact"
class="radio--bold"
/>
</li>
<li class="radio-list-item">
<el-radio
id="selfBestTimeToContactEvening"
label="Evening (5 PM - 8 PM)"
name="selfBestTimeToContact"
class="radio--bold radio-label"
/>
</li>
</ol>
</el-radio-group>
</el-form-item>