Question

我的表单中有一个文件字段。那个领域看起来很奇怪。所以我想把它变成一个图像。所以我点击Image然后打开一个文件字段（选择一个文件）。

给我最好的解决方案。对于所有浏览器支持。

Answer 1

这应该做：

HTML代码

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS样式

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

Answer 2

使字段透明并将其放在div中，其中overflow：hidden和您的图像为背景：

<div style="width:16px;height:16px;overflow:hidden">
  <input type="file" name="file" style="opacity:0;filter:alpha(opacity=0)">
</div>

如果图像大于字段的默认大小，您还必须编写JS，根据光标位置移动字段，所以尽量避免使用。

Onclick图像打开/弹出文件字段

2 个答案: