html - 如何将上传按钮更改为文本？

Question

我已经使用上传文件（类型=文件）来上传文件。我想将按钮更改为文本。由于用户将使用 Google chrome 或 IE。所以我必须考虑两种浏览器。我更喜欢简单的代码。这是我的代码（我正在使用多个上传文件）

<td><input type="file" name="picture[]" id="picture" ></td>

谢谢

Answer 1

如果我理解正确，您是在询问input使用type="file". 这非常困难，但我通常做的是包装输入，并包含另一个显示所需样式的标签。然后我将输入标签放在顶部（以便仍然可以单击它），但使其透明，以便显示底层样式。就像是：

HTML：

<div class="uploadWrapper">
    <p>Click to choose file</p>
    <input type="file" name = "filedata" size="100" />
</div>

CSS：

.uploadWrapper {
    overflow: hidden;
    position: relative;
    height: 25px;
    width: 250px;
    background: rgb(10,100,210);
}

.uploadWrapper input {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.uploadWrapper p {
    margin: 0 10px;
    position: absolute;
    line-height: 25px;
}

http://jsfiddle.net/BYossarian/NVr6t/

Answer 2

“每个浏览器都有自己的控件再现，因此您无法更改测试或控件的方向。” -原始来源

不过，我相信你可能有点棘手，用 CSS 修改按钮。

#picture {
    text-decoration: none;
    /*  etc... */
}