html - textarea 在聚焦时大小正确，但在聚焦时变大 5px

Question

我在制作相同尺寸的 <textarea> 时遇到了问题和 <p>并排。

当 textarea 处于焦点时一切都很好，但是一旦失去焦点，textarea 就会无缘无故地变大 3px。

有人知道如何防止这种情况发生吗？

代码:

<textarea id="keyInput" rows="1" inputType="text" onInput="keyFun()" autofocus></textarea>

和

#keyInput {
    text-transform: uppercase; 
    float: left;
    margin-right: 10px;
    word-wrap: break-word;
    box-sizing: border-box;
    line-height: 1.5;
    outline: none;
    resize: none;

    width: 350px;
    font-size: 16px;
    text-align: center;
    outline: 7px solid white;
}

所有有助于制作 textarea 的东西非常感谢对焦和散焦时尺寸稳定。

CodePen

Answer 1

如果你删除

outline: 7px solid white;

它不会增长和收缩。

你也可以把背景颜色设置成和html一样，这样效果不明显:outline: 7px solid #DFCFBE