HTML/CSS 表单样式答案

【问题标题】：HTML/CSS form stylesHTML/CSS 表单样式
【发布时间】：2012-11-02 00:38:12
【问题描述】：

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

这是我的设计 - 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>

【问题讨论】：

标签： html css forms upload styles

【解决方案1】：

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

Quirksmode has a great step by step 这样做，至少让你开始。

不过，其中的基础是：

使用position: relative 为您的正常文件输入设置样式。
添加一个新的纯旧文本输入并将其放置在文件输入的顶部。
将文本输入设置为类似于文件输入的样式
将文件输入的opacity 删除为 0，使其不可见，但仍可点击（这是关键，因为您实际上仍在使用文件输入）
使用 JavaScript 将文件名放入文本输入中

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

【讨论】：

【解决方案2】：

对于浏览按钮的样式，您需要借助 css-javascript duo 或 twitter bootstrap 之类的东西，它可以开箱即用1.. 另外，check this post 和 this article

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

【讨论】：