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

}

你知道我如何使用图像来设计我的其他表单按钮的样式吗，这里是 html -

            <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 has a great step by step这样做，至少让你开始。

其基本原理是:

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

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