自定义input file样式
Posted 居无常
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义input file样式相关的知识，希望对你有一定的参考价值。
实现方法一：
自定义input file样式；一般都是通过隐藏input，通过定义label来实现。这种做法要注意的是label的for属性要指定input对应的id;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #file { display: none; } label { padding: 6px 15px; border-radius: 18px; background: #2F9DEA; color: #FFF; border: 1px solid #49A9ED; box-shadow: inset 0px 0px 3px #FFF; } label:focus, label:active { box-shadow: none; } </style> </head> <body> <div> <label for="file"> <input type="file" id="file" />上传文件 </label> </div> </body> </html>
效果如下：
点击后效果：
实现方法二：
<style type="text/css">
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity = 0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
<div> <a href="javascript:void(0);" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a href="javascript:void(0);" class="file">选择文件 <input type="file" name="" id=""> </a> </div>
效果：
以上是关于自定义input file样式的主要内容，如果未能解决你的问题，请参考以下文章