提交按钮值不随 css 改变答案

【问题标题】：Submit button value not changing with css提交按钮值不随 css 改变
【发布时间】：2013-11-10 05:34:04
【问题描述】：

我正在尝试向提交按钮的值添加一些 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;
        }
    }
}

【问题讨论】：

澄清一下，你明白font-weight: 300是普通字体吗？大多数字体只有两个或三个可以设置的字体粗细。
@FakeRainBrigand 实际上我认为font-weight: 400; 是正常的。 300 与 font-weight: light; 相同，因为我使用的是 Open Sans
您的 html 似乎无效。你有<div><form></div></form>。
@Omada 我知道这是我能够让提交按钮全宽同时保持在表单标签内的唯一方法

标签： html css sass

【解决方案1】：

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

【讨论】：

这对我来说是个问题。出于某种原因，input[type=submit] 没有将font-family 应用于其父元素。我认为这仅适用于自定义字体，但我不确定。

【解决方案2】：

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

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

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

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

限制：

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

【讨论】：

1+ 好信息！我不知道这个。
@FakeRainBrigand 实际上奇怪的是我不得不再次指定字体系列。它已经指定但由于某种原因它没有接受它。添加font-family: Open Sans 后，它起作用了。很奇怪，因为我已经在 html 中定义了家庭
@zachstarnes 在a 元素中也发生在我身上！我只放了font: inherit 来修复它=）。
这可能是浏览器样式的干扰。我建议找到一个好的 CSS reset/normailzer（它们在极端情况下各不相同，从有效地拥有 inline 和 block 元素，到仅删除默认的 padding/margin；货比三家）。

【解决方案3】：

这就是你想要的？ DEMO

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

【讨论】：

@IeoMestizo 不是真的。这就是它目前的样子。我正在尝试将字体粗细更改为 300，因为默认情况下它的 400
当我将值 300 更改为 900 时，字体会改变...你确定 300 变亮了吗？
@IeoMestizo 可以，但是当您执行 300 时它不会，这就是我想要开始工作的原因。每个其他标签都会正确更改字体粗细，但由于某种原因不会这样做

【解决方案4】：

您只需将其添加到您指定的颜色旁边 !important

.button
{
 color:#000 !important; 
  }

【讨论】：