When attempting to tab through the fields, I encounter an issue where the fields do not highlight as expected. Despite trying various solutions, such as the following CSS code:
.select2-selection__rendered:focus {
outline: none !important;
box-shadow: 0px 0px 5px 2px lightblue !important;
}
The select field in question appears like this:
<div class="col">
<label>Start Month *</label>
<select name="startMonth" class="select2 form-control" tabindex="0">
{% for month, name in months %}
<option value="{{ month }}">{{ name }}</option>
{% endfor %}
</select>
</div>
Although using tabindex="0" on <div class="col"> enables me to highlight the field, I still need to press Tab once more before being able to use Enter to view the options within the field.
I have also observed that while :hover works as intended, :focus does not have the desired effect.