如何解决输入文本框从集中注意力到CSS的问题？

Question

当输入文本框应从继承的边框颜色逐渐淡化为黑色时，它会继续缩小焦点。

一段时间后，我将返回一个不完整的项目，并且我一直遇到输入文本框缩小焦点的问题。它应该从继承的边框颜色逐渐淡出焦点，变成黑色，并且textarea元素确实很好，但是由于某种原因，输入文本框会变成粗边框一秒钟，然后在所有面上稍微缩小。自从我尝试将默认边框大小设置为1px以来，这很奇怪，并且当我将边框颜色设置为某些自定义颜色时，这种方法（大多数（但并非全部）起作用）。但是，当我将其设置为继承时，它执行的操作完全相同。我不确定问题出在哪里。

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