自定义文件上传控件样式-input透明法。
AI 代码解读
作为一个刚入坑不久的程序小白，今天和一个自定义<input type="file">控件的工作斗智斗勇了一上午。通过各种膜拜大神们的资料，总算最后有了一个还算看的过去的解决方案，来记录一下。
页面中，<input type="file">控件的默认显示
在Chrome中是这样：
在IE里是这样：
要如何使它变成下面这样，点击此区域也能上传文件呢？
原理：将input放进一个具有背景的div标签中，并且使input透明。
html代码：
<div class="inputbg"><input type="file"></div>
css代码：
.inputbg{
background: url(bg.jpg) no-repeat;
position: relative;
width: 311px;
height: 162px;
}
.inputbg input{
position: absolute;
top: 0;
left: 0;
opacity:0;
filter:alpha(opacity=0);
width: 311px;
height: 162px;
cursor: pointer;
}
</style>
AI 代码解读
这个时候浏览器里显示是这样的。
看起来正常，但是功能上确有问题。
chrome：能够实现点击弹出文件窗口，但是在某些地方鼠标悬停的时候是 小手状，某些地方却是箭头。
IE:虽然整个区域显示都是小手状，但是点击会出现竖线光标。而且IE10-IE6里都只有一小部分区域点击的时候会出现文件窗口，其他地方点击没有反应。
问题1：去掉IE浏览器里的竖线光标。
在html代码里给input添加属性unselectable="on"。此时，html代码变为：
<div class="inputbg"><input type="file" unselectable="on"></div>
问题2：解决Chrome浏览器里部分区域鼠标悬停是箭头的问题。
添加font-size: 0;此时css代码变为：
.inputbg{
background: url(bg.jpg) no-repeat;
position: relative;
width: 311px;
height: 162px;
}
.inputbg input{
position: absolute;
top: 0;
left: 0;
opacity:0;
filter:alpha(opacity=0);
width: 311px;
height: 162px;
cursor: pointer;
font-size: 0;
}
</style>
AI 代码解读
问题3：解决IE10-IE6里只有一小部分区域点击的时候会出现文件窗口，其他地方点击没有反应的问题。
这个时候会发现，如果将font-size的值设置的足够大，就能解决这个问题。但是会影响Chrome里的功能。所以可以针对IE10-IE6专门设置。在css添加属性font-size: 150px\9;。现在css代码变为
.inputbg{
background: url(bg.jpg) no-repeat;
position: relative;
width: 311px;
height: 162px;
}
.inputbg input{
position: absolute;
top: 0;
left: 0;
opacity:0;
filter:alpha(opacity=0);
width: 311px;
height: 162px;
cursor: pointer;
font-size: 0;
font-size: 150px\9;
}
</style>
AI 代码解读
到现在为止所有浏览器都显示正常了。附上完整代码：
html代码：
<div class="inputbg"><input type="file" unselectable="on"></div>
css代码：
.inputbg{
background: url(bg.jpg) no-repeat;
position: relative;
width: 311px;
height: 162px;
}
.inputbg input{
position: absolute;
top: 0;
left: 0;
opacity:0;
filter:alpha(opacity=0);
width: 311px;
height: 162px;
cursor: pointer;
font-size: 0;
font-size: 150px\9;
}
</style>
AI 代码解读
PS:之前看很多网上的其他资料发现，有的大神在定位的时候，用的是right： 0；还没理解是什么意思~所以还请大家多多指教~
