Question

在将CSS添加到我的按钮后，它仍然具有“默认外观”。我认为图像会解释更多。我拿出了表单其他部分的大部分代码，以排除任何不必要的代码 how it looks like

.registration-table {
  background: #192231;
}

.signup-button {
  background: #494e6b;
  color: #ffffff;
  border: none;
  text-align: center;
  display: block;
  padding: 8px 18px;
  float: none;
  margin-bottom: 12px;
  width: 100%;
}

<table class="registration-table">
  <th>Signup Form</th>
  <form method="POST">
    <tr>
      <td>
        <button class="signup-button">
    <input type="submit" value="Signup"></button>
      </td>
    </tr>
  </form>
</table>

Answer 1

这是因为您在<input type="submit" value="Signup">中有一个button。

您可能想要的是

<button class="signup-button" type="submit">Signup</button>

Answer 2

似乎您的实现中存在问题。

您实际上可以执行以下操作：

删除内部的输入类型button，然后添加类型submit
或删除button并将其css类添加到<input type="button">

.signup-button {
    background: #494e6b;
    color:#ffffff;
    border: none;
    text-align: center;
    display: block;
    padding: 8px 18px;
    float: none;
    margin-bottom: 12px;
    width: 100%;
  }

  <button class="signup-button" type="submit">Signup</button>
  <input type="submit" value="Signup" class="signup-button">

Answer 3

如果您希望所有提交按钮看起来都一样，请将其放入CSS中； input[type=submit] {}，例如。

input[type=submit] {
    background: #494e6b;
    color:#ffffff;
    border: none;
    text-align: center;
    display: block;
    padding: 8px 18px;
    float: none;
    margin-bottom: 12px;
    width: 100%;
}

然后您可以在html中删除该元素。

<table class="registration-table">
  <th>Signup Form</th>
  <form method="POST">
    <tr>
     <td>
    <input type="submit" value="Signup">
      </td>
    </tr>
  </form>
</table>

为什么我的按钮具有这种默认外观

3 个答案: