input[type=file]这个东西直接放在页面上是这样的。巨丑!,直接用CSS对这个input改样式的话,它会对按钮以及后面的文字同时动作。因为他们是一个整体。
所以,我们需要先把原来的按钮透明度opacity设置为0,在它的外层用div包裹它,然后对这个div进行样式更改,这样我们就可以来画一个美美的上传文件啦 !
DOM结构:
css样式:
.a_upload {
padding: 4px 10px;
margin-bottom: -10px;
margin-left: 20px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.a_upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a_upload:hover {
color: #eee;
background: #ebffff;
border-color: #ccc;
text-decoration: none
}
完成以后就是这个样子哒:
,也可以根据自己想要的样子去自行更改。