Utilizing Bootstrap's vue form-group has been instrumental in my creation of input fields. I am currently attempting to apply specific CSS styling to the 'legend' element within the following code:
<fieldset id="__BVID__59" class="form-group" required="required">
<legend class="col-form-label pt-0">Login</legend>
<div tabindex="-1" role="group">
<input type="text" class="form-control">
<!----><!----><!---->
</div>
</fieldset>
My objective is to include asterisks on the labels marked as required, so I have proposed the following solution:
.form-group[required] legend::after {
content: '*';
color: red;
}
However, it seems that my CSS is failing to recognize the legend element, regardless of what approach I take. Even when substituting 'label' for 'legend', the issue persists. I have experimented with utilizing nth-child(0) of fieldset (the parent element), but it appears that this child is being disregarded entirely. Initially, I suspected that the problem may lie within the CSS configurations of the Bootstrap framework I am using, yet even adding !important does not yield any results.
Any assistance or guidance on resolving this matter would be greatly appreciated.