更改表单按钮的外观答案

【问题标题】：Changing the look of form buttons更改表单按钮的外观
【发布时间】：2010-10-28 12:22:51
【问题描述】：

有了这点 CSS，我的表单按钮现在看起来是扁平的（2D），我非常喜欢这种外观：

input {
  border: 1px solid #999;
}

但是，对于文件字段（选择要上传的文件），按钮仍然是 3D。然后边框围绕该按钮及其旁边的文本。

我尝试通过将输入重命名为 .input 来解决此问题，然后仅将其应用于我的提交/取消按钮，但现在它们看起来像文件字段的样子。那么我该如何解决这个问题，让它们看起来都是扁平的/2D 的呢？

另外，有没有办法将这些表单按钮创建为普通链接？我很喜欢他们的样子。我在 Rails 中编程，所以如果你可以发布辅助函数，如果它可用的话，那就太好了。

【问题讨论】：

标签： html ruby-on-rails css

【解决方案1】：

article 解释了设置文件输入按钮样式的好技巧

【讨论】：

我已经多次使用这种方法并且取得了巨大的成功。作为旁注，您不能再显示文件的完整文件路径，因为大多数浏览器在询问文件输入按钮的值时只返回文件名而不是路径。
此外，如果您想允许清除该字段，则必须销毁该元素并创建一个新的文件输入元素。

【解决方案2】：

http://extjs.com/forum/showthread.php?t=29032
该线程使用 ExtJS 库创建一个可以设置样式的输入按钮。我不一定会仅仅因为这个原因而使用 ExtJS，但如果你真的想花哨地看看他的文件按钮的代码。这段 Javascript 不是将文件按钮放在图像顶部并调整它直到它运行良好，而是实际上将按钮置于鼠标所在的任何位置。允许您创建各种形状和大小的外观精美的按钮。

【讨论】：

【解决方案3】：

要将提交按钮创建为普通文本链接，您可以使用 Javascript 将 onclick 事件附加到单个单词，而不是使用提交按钮。

【讨论】：