html - Padding/Line-Height/Height 不会增加 HTML 输入元素的高度

Question

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

我希望它匹配左侧文本区域的高度吗？我已经看到建议使用 padding、line-height 甚至 height 属性的答案。

但是，这些似乎都不适合我。跟 Flexbox 有关系吗？无论如何，我似乎无法弄清楚。我发誓上次创建表单时，css 高度属性似乎适用于输入元素...

#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 添加到输入按钮，这应该会删除按钮的所有默认样式。