Chrome输入类型文件宽度（单击区域）

Question

#uploadImg{width:30px;}

<input type='file' id="uploadImg" />

我有一个输入类型文件，我将宽度更改为30px，当我在chrome上测试时，如果我单击右侧（30px之外），输入文件仍将打开。有谁知道如何更改chrome中输入类型文件的点击区域？

http://jsfiddle.net/smrB4/1/

Answer 1

只需添加一些css：

#uploadImg{width:30px; overflow:hidden;}

Answer 2

您需要添加overflow:hidden属性。

此外，设置文件上传对话框本身可能是一个好主意，因为它在每个浏览器上看起来都不同。基本上你需要'隐藏'真正的文件上传元素并添加自定义样式元素。

请参阅此处的示例：

http://jsfiddle.net/smrB4/3/

HTML：

<div id='container'>
    <div id='overlay'>
        X
    </div>
    <input type='file' id="uploadImg" />
</div>
<br>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8593;click here </span>

CSS：

#uploadImg{width:30px;opacity:0.0;}
#container{position:relative;overflow:hidden;width:30px;height:30px;}
#overlay{position:absolute;top:0p;width:28px;height:28px;background-color:#ddd;border:1px solid #000}