Как исправить сглаживание ввода текста в фокусе в CSS?

Question

Текстовое поле ввода продолжает фокусироваться, когда оно должно просто исчезнуть с унаследованного цвета границы на черный.

Через некоторое время я возвращаюсь к незавершенному проекту и продолжаю сталкиваться с проблемой, когдаполе ввода сокращается в фокусе. Он должен постепенно переходить от унаследованного цвета границы к черному в фокусе, и элемент textarea делает это очень хорошо, но по какой-то причине поле ввода текста занимает толстую границу в течение доли секунды, а затем немного уменьшается со всех сторон. Это очень странно, поскольку я попытался установить размер рамки по умолчанию на 1 пиксель, и это работает (на большинстве, но не на всех по какой-то причине), когда я устанавливаю цвет границы на какой-то другой цвет. Но когда я устанавливаю его для наследования, он делает то же самое. Я не уверен, откуда проблема.

input[type=text], input[type=password], input[type=submit] {
    text-align: center;
    outline: none;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    padding-right: 1em;
    padding-left: 1em;
    background: #FFFFFF;
    height: 2.25em;
    width: 20em;
    margin: none;
}

input[type=text], input[type=password], textarea {
    transition: all 0.3s ease-in-out;
    resize: none;
    font-family: inherit;
}

input[type=text] {
    border: 1px solid inherit; /* If inherit is changed to gray, for
                                      example, it fades into black normally
                                      just like textarea does. Not defining 
                                      border at all leads to the issue 
                                      happening always                   */
}

textarea {
    font-size: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
    outline: none;
    border: solid 1px #000000;
}