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-weight，则假定为400.

提供轻量级变体的字体通常需要100/200（经验数字，而非规格）。粗体通常是600，额外的粗体通常是900.

请尝试使用font-weight spec中的一个词，而不是数字，其中包括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

您只需将其添加到指定颜色！important

旁边

.button
{
 color:#000 !important; 
  }

提交不随css更改的按钮值

4 个答案:

限制：