自定义 CSS/HTML 浏览图像表单 [重复]答案

【问题标题】：Custom CSS/HTML Browse For Image Form [duplicate]自定义 CSS/HTML 浏览图像表单 [重复]
【发布时间】：2012-11-25 01:45:06
【问题描述】：

可能重复：
Style input type file?

我知道每个浏览器都有自己的显示方式...

 <input type="file" name="image" id="image" class="input_text"/>

我的问题是，有没有办法自定义浏览图片按钮。我想使用 HTML/CSS/PHP 将普通表单上的浏览和上传按钮替换为一个图像按钮。这可能吗？它是否与所有浏览器类型兼容。

谢谢。

【问题讨论】：

标签： php html css forms file-upload

【解决方案1】：

您最好使用 Uploadify 之类的插件。它允许您像任何其他元素一样设置该字段的样式。

【讨论】：

【解决方案2】：

有多种方式，我比较喜欢的方式是这样的：

<div class="browse">
    <div class="placeholder">Upload</div>
    <input type="file" name="image" id="image" class="input_text"/>
</div>

使用这个 CSS 代码：

.browse {
    position: relative;
    width: 100px;
    height: 20px;
}

.browse input, browse div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.browse input {
    opacity: 0;
    filter: alpha(opacity=0);
}

这样会显示上传文本，但您实际上会单击浏览按钮。

【讨论】：

是的，但我不想将它们作为“选择文件”的按钮，而是将其替换为执行此操作的图像。
然后将：
Upload
替换为：
好吧，谢谢你再问一个问题。在我浏览并选择我的文件后，是否会提交表单？
不，如果您愿意，您可以在输入上放置一个 onchange 事件吗？只需替换：与