html - 提交按钮值不随 css 改变

Question

我正在尝试向提交按钮的值添加一些 CSS。唯一的问题是它不会听某些属性。更改字体的大小可以正常工作，但我正在尝试这样做，但font-weight: 300;它不会更改文本。有什么办法可以让它工作吗？

这是html：是的，提交按钮是container故意的。

<section id="contact">
    <div class="container">
        <form id="contact-form" action="contact.php" method="post" class="contact">
            <input id="sendername" type="text" name="name" placeholder="Your Name" />
            <input id="senderemail" type="email" name="email" placeholder="Email Address" />
            <textarea id="sendermessage" name="message" placeholder="Message"></textarea>
    </div>
        <input id="submit" type="submit" value="Send." />
        </form>
</section>

这是css：它使用SASS编译。

#contact {
    min-height: 100px;
    background-color: $bgDark;
    @extend .master-padding;

    #contact-form {
        margin: 0;
        padding: 0;
    }

    #submit {
        display: block;
        width: 100%;
        font-size: 40px;
        border: none;
        color: $colorLight;
        font-weight: 300;
        @extend .action;

        &:hover {
            color: $colorDark;
        }
    }
}

Answer 1

为了清楚起见，我接受的答案是部分正确的。另一部分是我必须添加font-family: Open Sans到 CSS 中。奇怪的是，我已经在 css 的 html 标签中指定了它。我不知道为什么我不得不再做一次。

Answer 2

如果您不指定font-weight，则假定为 400。

提供浅色变体的字体通常需要 100/200（数字取决于经验，而不是规格）。粗体通常为 600，加粗通常为 900。

尝试使用font-weight规范中的单词之一，而不是数字，包括normal(400)、bold(700) 或lighter。如果您指定lighter并且如果未指定，font-weight则将是500或更少，它将被视为100或轻量级。

或者使用该100系列中最轻的字体的值，这是可用的。

限制：

如果用户没有轻字体font-family，它将默认为最轻的（通常与 相同normal）。

Answer 3

这就是你想要的？演示

#submit {
    font: 300 40px Arial, sans-serif;
    width: 100%;
    display: block;
    text-align: center;
    border: none;
}

Answer 4

您只需将其添加到您指定的颜色旁边！重要

.button
{
 color:#000 !important; 
  }