提交按钮值不会随着CSS改变

Question

我正在尝试向提交按钮的值添加一些CSS。 唯一的问题是它不会监听某些属性。 更改字体的大小可以很好地工作，但是我试图将其设置为font-weight: 300; 并且它不会更改文本。 有什么办法可以使它正常工作吗？

这是html：是的，submit按钮是故意在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-weight ，则假定为400。

提供浅色变体的字体通常需要100/200（根据经验编号，而不是规范编号）。 粗体通常为600，超粗体通常为900。

代替数字，尝试使用font-weight规范中的一个单词，其中包括normal （400）， bold （700）或lighter 。 如果指定lighter ，如果未指定，则font-weight将为500或更小，它将被视为100或更轻。

或使用值100 （该字体是家族中最轻的字体）。

限制：

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

Answer 2

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

Answer 3

这就是你想要的吗？ DEMO

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

Answer 4

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

.button
{
 color:#000 !important; 
  }