修改input file控件默认浏览文字

  如何修改html input file控件默认的“浏览”(firefox和ie)或者"选择文件“(chrome)显示内容。

解决办法:用一个透明的file控件浮动到你的自己的提示文字或者图片上即可。

注意:IE下必须要调整默认的按钮位置对到你的文字上,前面显示文件路径的那部分覆盖住提示文字需要双击才能弹出文件选择窗口。自己调整input的font-size属性变换file控件大小,设置margin-left调整按钮位置。

  修改input file控件默认浏览文字示例如下

<!DOCTYPE html>
<title>修改input file控件默认浏览文字</title>
<style>
div.file{display:inline-block;width:100px;height:20px;line-height:20px;position:relative;overflow:hidden;color:red}
div.file input{position:absolute;left:0px;top:0px;zoom:1;filter:alpha(opacity=0);opacity:0;font-size:20px;margin-left:-240px}
</style>
<!--[if lte IE 7]><style>div.file{display:inline}</style><![endif]-->
<div class="file">上传图片<input type="file" name="myfiles"/></div>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:修改input file控件默认浏览文字

评论(0)Web开发网
阅读(1615)喜欢(0)HTML/CSS兼容/XML