css如何修改上传文件按钮样式
的有关信息介绍如下:不同浏览器对type=file的样式显示不一样,而设计师给我们前端的只有一个上传按钮的效果图,怎么办呢。浏览默认的样式我们无法修改,怎么办呢??
思路:
1.在type=file标签外面添加一个标签,让这个标签显示我们想要给用户看到的上传按钮效果;
2.把type=file设置为透明的,用户点击的是type=file,实际看到的效果时我们外部的
打开html软件开发工具,新建一个html代码页面。如图:
1.在html代码页面中创建一个
2.然后在
3.在
代码:
上传文件
设置file-btn、file-box这两个类的样式。
file-box用于显示给用户看到的页面效果,file-btn用于点击效果,file-btn需要与file-box完全重合,需要使用positon进行定位。
样式代码:
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
使用不同浏览器打开查看效果。保存html页面后使用浏览器打开即可看到效果,案例中使用常用的4个浏览器。如图:
所有代码。可以直接复制所有代码,粘贴到新建html页面,保存后即可看到效果。
所有代码:
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
上传文件