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>
    

      效果:

  • 相关阅读:
    Flink--Table和DataStream和DataSet的集成
    flink-SQL
    Flink的容错
    Flink--基于mysql的sink和source
    Flink--sink到kafka
    Flink在流处理上常见的Source和sink操作
    【计算机网络】-传输层-传输服务的要素
    【计算机网络】-传输层-传输服务
    文件系统-文件的逻辑结构与存取方法
    文件系统-概念
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5359066.html
Copyright © 2011-2022 走看看