Question

我有一个非常简单的php联系表单。我试图使表单看起来很好，一切都很顺利，直到我设置提交按钮样式。

按钮代码为：

<input type="submit" value="Submit">

我想用css来设置按钮的样式。

我想使用的代码是：

<input type="submit" id="comment-submit" value="Submit">

id =“comment-submit”的CSS是：

#comment-submit {
    width: 144px;
    height: 44px;
    display: block;
    border: 0;
    font-family: "YanoneBold", Arial, sans-serif;
    font-size: 18px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.35);
    padding: 0 4px 4px 0;
    margin: 30px 0 80px 0;
}

没有样式，表单正确提交。通过样式，表单无效。

Answer 1

如果您将其更改为<button type="submit"它可能会有效或将css更改为input[type=submit]{}，但这可能会在IE中出现问题

Answer 2

不要将其声明为ID，而是将其声明为CLASS

所以

.comment_submit {
    width: 144px;
    height: 44px;
    display: block;
    border: 0;
    font-family: "YanoneBold", Arial, sans-serif;
    font-size: 18px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.35);
    padding: 0 4px 4px 0;
    margin: 30px 0 80px 0;
}

<input type="submit" class="comment_submit" value="Submit">

尝试这个，我想可能是id引起了问题，并且使用短划线作为下划线，只是为了这个目的，使用简单的字体而不是使用web字体，并删除text-shadow属性。

Answer 3

对不起。我应该在评论中添加它，但我没有特权。

我复制/粘贴您的示例，它可以正常工作。我有：

<form action="" method="get">
    <input type="hidden" name="ble" value="uff" />
    <input type="submit" id="comment-submit" value="Submit">
</form>

在Chrome和Firefox中，它会发送GET数据。也许问题出在其他地方。有一点不同的是你的鼠标光标不会改变。

样式时破碎的表单提交按钮

3 个答案: