2

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

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

2 回答 2

2

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

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

但是，其中的基础是：

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

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

于 2012-11-13T15:21:19.037 回答
0

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

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

于 2012-11-13T16:03:05.860 回答