Question

我使用上传文件（type = file）上传文件。我想将按钮更改为文本。由于用户将使用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

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

但是，我相信你可能会有点棘手并用CSS修改按钮。

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

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

2 个答案: