您的位置：首页 > Web前端 > CSS

自定义input file样式

2016-04-06 13:53 417 查看

实现方法一：

自定义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>

　　效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航