php - 自定义 CSS/HTML 浏览图像表单

Question

可能重复：
样式输入类型文件？

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

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

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

谢谢。

Answer 1

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

Answer 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);
}

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