zoukankan      html  css  js  c++  java
  • 自定义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>
    

      效果:

  • 相关阅读:
    div拖拽缩放jquery插件编写——带8个控制点
    vuejs快速入门
    逗号运算笔记
    怎样用PHP制作验证码呢?
    mac下多个php版本快速切换的方法是怎么样
    HTML5 拖拽复制功能的实现方法
    CentOS下使用Percona XtraBackup对MySQL5.6数据库innodb和myisam的方法
    MySQL数据很大的时候
    Facebook MyRocks at MariaDB
    Mysql数据库知识-Mysql索引总结 mysql mysql数据库 mysql函数
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5359066.html
Copyright © 2011-2022 走看看