input type=file 如何达到去除输入框效果

<input type=“file”>输入框中做到去除输入框效果

在我平时修改页面的时候，由于需要用到上传文件这一功能的时候，需要用到<input type="file">，但是效果却不尽人意。如下图：

此时显示的按钮部分（选择文件）与文字部分（未选择任何文件）当你点击时都能够弹出上传文件的选择框进行选择，但这放在页面中显示是不尽人意的。最理想的效果就是能够去除文字部分，只留下按钮部分。

下面是我想到的如何解决这一问题的方法：

由于<input type="file">自带默认的样式，无法去简单的修改。那么，我想到的是用一个自己创建的按钮去替代这一部分，因为需要的只是点击‘选择文件’按钮后出现选择框这一功能。那么，利用点击新建的按钮（这个按钮的样式能够用css去修改样式）时触发点击事件，用新建按钮的点击事件来触发<input type="file">

接下来是代码演示：

[html]

<inputtype="text"id="textfield"class="txt"/>

<inputtype="button"class="btn"value="浏览..."onclick="document.getElementById("fileField").click()"/>

<inputtype="file"id="fileField"class="file"size="28"onchange="document.getElementById("textfield").value=this.value"/>

这里有三个input，第一个是用来显示上传路径的输入框（如果不需要可省去，那么左侧的输入框就会消失），第二个就是用来显示的浏览按钮，第三个是真正用来弹出选择框的按钮，但在页面中不显示。

点击后出现：

此处只显示第三个input的css样式，前两个可以在页面中显示的可以自行修改：

[html]

.file{filter:alpha(opacity:0);opacity:0;width:0px}

这里将opacity和width设置为0，这样在页面中无法看见，另外也无法被点击到。

可以看到我用第二个按钮的onclick事件来触发了第三个的点击事件，就能达到相同的效果

这里分享的是我平常遇到的小问题，希望能够帮助到您0v0!