HTML/CSS 表单样式

Question

我正在尝试创建一个文件共享网站，但是在为我的上传表单设置样式时遇到了麻烦，因为我的设计非常先进，而不是设置个人样式，我正在尝试将设计设置为背景图像。

这是我的设计 - http://icap.me/i/s5YIbheY3g.png

这是目前的努力 - http://icap.me/i/ODuzJOQMhS.png

到目前为止，我使用以下代码设置了上传按钮的样式 -

form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0

}

你知道我如何使用图像来设计我的其他表单按钮的样式吗？

            <form action="upload_file.php" method="post"enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <br />
        <input type="submit" name="submit" value="Submit" />
        <input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
        </form>

Answer 1

样式化一些表单元素很糟糕，不幸的是，文件元素就是这些元素之一。 这是因为浏览器实际上是从操作系统派生控件本身（这意味着您完全无法控制它的外观）。 这对您来说意味着，为了设置样式，您将需要 JavaScript 和一些 CSS hackary。

Quirksmode 有一个很好的一步一步来做，至少让你开始。

但是，其中的基础知识是：

1. 使用position: relative普通文件输入的样式。
2. 添加一个新的纯旧文本输入并将其放置在文件输入的顶部。
3. 将文本输入设置为看起来像文件输入
4. 将文件输入的opacity设为 0，使其不可见，但仍可点击（这是关键，因为您实际上仍在使用文件输入）
5. 使用 JavaScript 将文件名放入文本输入

这是一种原始的，不是很符合标准（额外的元素等等）。 如果您已经在使用 JavaScript 库（jQuery、MooTools 等），您可能会找到一个可以处理控件本身的插件，您只需为其添加样式即可。 这种方法的优点是您不一定需要自己添加额外的元素（因此您不会有一个杂散的input字段），并且 JavaScript（理想情况下）会获取您的文件输入的存在并相应地“修复”它们。

Answer 2

对于样式浏览按钮，您需要借助 css-javascript duo 或类似twitter bootstrap 之类的东西，它可以开箱即用1 .. 另外， 请查看这篇文章和这篇文章

作为个人观点，我觉得像浏览按钮和下拉菜单这样的表单元素不应该做太多调整..给出两个好处..一个，更快的开发..第二个，跨浏览器对称..