样式化时损坏的表单提交按钮答案

【问题标题】：broken form submit button when styled样式化时损坏的表单提交按钮
【发布时间】：2012-06-30 02:57:26
【问题描述】：

我有一个非常简单的 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;
}

没有样式的表单可以正确提交。使用样式，表单什么都不做。

【问题讨论】：

我怀疑它与样式有关。你有没有操纵$('#comment-submit')的JavaScript？
这怎么可能。样式永远不能改变提交按钮的默认功能。
我会检查js。我很确定它不存在，但可能我错过了什么
您可以使用TAB键选择按钮并以这种方式提交吗？如果是这样，我猜它与文本阴影/块有关。如果我是你，我会单独注释掉 CSS 的每个部分并检查。然后取消注释最后一个并尝试下一个，直到找到导致问题的原因。
视觉事件可能会帮助您发现 js 是否操纵了您的按钮 sprymedia.co.uk/article/Visual+Event+2

标签： html css contact-form

【解决方案1】：

不要将其声明为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 引起了问题，并将破折号改为下划线，只是为了达到目的，使用简单的字体而不是使用网络字体，并删除 text-shadow 属性。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：