Почему HTML выбирает изменение ширины компонента при выборе?

Question

Я занимаюсь разработкой приложения, используя ASP. NET Core и Razor. На одной странице у меня есть несколько простых выпадающих списков с двумя элементами, для которых я хочу, чтобы ширина была установлена ​​так, чтобы вместить только самый большой элемент, а не больше, который я установил со свойством max-width. Когда я нажимаю на один из выбранных компонентов, он расширяется, чтобы быть шире, чем значение, которое я ему установил, и остается таким, пока он имеет фокус. Когда он теряет фокус, он возвращается к нужному мне размеру.

Выбранный компонент определяется следующим образом (он находится внутри таблицы):

    <tr>
        <td>
            <div>
                <label>Order: </label>
                <select name="tenseorder" class="selectA" asp-items="@Model.tenseorder" asp-for="@Model.seltenseorder"></select>
            </div>
        </td>
    </tr>

Значения в В раскрывающемся списке создаются следующие:

    public List<SelectListItem> tenseorder                          // What order does the user want to practice in?
        {
            get
            {
                return new List<SelectListItem>
                {
                    new SelectListItem { Value = Convert.ToString(0, CultureInfo.InvariantCulture), Text = "sequential" },

                    new SelectListItem { Value = Convert.ToString(1, CultureInfo.InvariantCulture), Text = "random" 
                }
            };
        }
    }

css выглядит следующим образом (кроме параметра max-width, все в файле css - это исправления, которые я пробовал из своего исследования готово):

/* Drop-down lists */
    .selectA {
        max-width: 110px;
        padding: 0px;
        margin: 0px;
        display: inline-block;
        vertical-align: top;
        overflow-y:hidden;
        white-space: normal;
    }
    .selectA select:focus {
        max-width: 110px;
        padding: 0px;
        margin: 0px;
        display: inline-block;
        vertical-align: top;
        overflow-y: hidden;
        white-space: normal;
    }

Вот снимок экрана, показывающий, что происходит с выбранными компонентами на странице - вы можете видеть, что выбранный левый компонент шире, чем два других:

Я прочитал много ответов о изменении размера выбранных компонентов и много о синтаксисе css, и, как вы можете видеть из css выше, я пробовал многие из них, например здесь , здесь , здесь , здесь и здесь , но пока ничего не получалось.

Я очень новичок в этом и самообучении, поэтому предположим, что я упускаю что-то очевидное. Может кто-нибудь сказать мне, как я настраиваю компонент select, чтобы он не менял ширину при выборе?

Спасибо.