html - 为什么我的 CSS 不改变提交按钮的高度？

Question

为什么我的 CSS 没有改变提交按钮的高度？宽度改变但高度不变。我也尝试过使用填充，但它也没有改变。

这是我的代码:-

.contact-form input[type="submit"] {
  width: 100%;
  height: 65px;
}

<form class="contact-form" action="">
  <input type="text" name="fullname" placeholder="full name">
  <input type="text" name="email" placeholder="email address">
  <input type="text" name="subject" placeholder="subject">
  <textarea name="message" placeholder="message"></textarea>
  <input type="submit" value="Submit">
</form>

/image/DpdQK.png

谢谢

Answer 1

您必须在提交按钮中使用填充以调整其大小。我在下面举了一个例子。

input[type=submit] {
  width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 40px 20px;
    border: none;
}

<form class="contact-form" action="">
  <input type="text" name="fullname" placeholder="full name">
  <input type="text" name="email" placeholder="email address">
  <input type="text" name="subject" placeholder="subject">
  <textarea name="message" placeholder="message"></textarea>
  <input type="submit" value="Submit">
</form>