select2 form-control not focusing when tabbing

Question

When trying to tab over the fields the fields will not highlight. I have tried many solutions such as:

.select2-selection__rendered:focus{
  outline: none !important;
  box-shadow: 0px 0px 5px 2px lightblue !important;
} 

My select field looks like:

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

While tabindex ="0" on <div class="col"> allows me to highlight the field, I have to tab one more time before I can press enter to see the options on the field.

I have also noticed that :hover works but not :focus .

Answer 1

so I found out that the CSS class was .select2-selection--single

and ended up doing:

.select2-selection--single:focus, .select2-selection--single:hover{
    box-shadow: 0px 0px 5px 2px lightcoral !important;
  }