填充/行高/高度不会增加HTML输入元素的高度

Question

如何增加提交按钮的高度？

我希望它与左侧的文本区域的高度相匹配？我已经看到了推荐填充，行高，甚至高度属性的答案。

然而，这些似乎都不适合我。它与Flexbox有关吗？无论如何，我似乎无法弄明白。我发誓最后一次创建表单时，css height属性似乎适用于输入元素......

#chatbox {
    width: 500px;
    background-color: #93ff95;
    border: 1px solid black;
}

#loginContainer {
    text-align: right;
    height: 50px;
    line-height: 50px;
}

#loginContainer input {
    height: 25px;
    font-size: 16px;
}

input#login {
    text-transform: uppercase;
    background: none;
    color: blue;
    border: none;
}

#loginForm {
    margin: auto;
    display: block;
}

#messagesArea {
    height: 350px;
    background-color: white;
    padding: 0 5px;
    overflow: auto;
}

#messageInputArea {
    height: 100px; 
    display: flex;
    margin: 0 10px;
}

#messageForm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1;
    margin: auto;
    min-height: 60%;
    min-width: 80%;
}

#messageBox {
    min-width: 80%;
    /*flex: 5;*/
    /*margin: 0 10px 0 0;*/
}

#stupidButton {
    min-width: 10%;
    font-size: 20px;
    padding: 15px 5px; 
    /*flex: 1;*/
    height: 100%;
}

#messageBoxBlocked {
    width: 85%;
    height: 85%;
    border: none;
    border-radius: 5px;
    font-size: 40px;
    margin: auto;
    display: none;
    padding: 0 10px;
    
}

        <h1>Chat with Customer Service</h1>
        <div id="chatbox">
            <div id="loginContainer">
                <form id='loginForm'>
                    <input type="text" name="username" placeholder="Enter a username"/>
                    <input id="login" type="submit" name="login" value="Login"/>
                </form>
    
            </div>
            <div id="messagesArea">
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
               <p>Admin: Hey Everyone!</p>
            </div>
            <div id="messageInputArea">
                <button id="messageBoxBlocked">Log in to enter chat</button>
                <form id="messageForm">
                    <input id="messageBox" name="messageBox" placeholder="Enter your message here"/>
                    <input id="stupidButton" type="submit" name="Send"/>
                </form>
            </div>
        </div>

Answer 1

它可以像您在Firefox中预期的那样工作，但在webkit浏览器（Chrome，Safari等）中它并不适用，这可能是因为它们具有应用于表单元素的额外样式信息。尝试将-webkit-appearance: none添加到输入按钮，这应该删除该按钮的所有默认样式。

Answer 2

对我而言，它看起来完全相同。请指定浏览器和/或提供它应该如何显示的图片。