实现方法一：

自定义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样式的更多相关文章

  1. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  2. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  3. 自定义input file 属性

    <label class="input"><input title="浏览文件" type="file" />浏览… ...

  4. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  5. input file 样式以及获取选择文件方法集合

    样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...

  6. input file样式美化

    默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...

  7. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  8. input.file样式修改

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 修改input:file样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. nginx 配置轮询服务

    通常我们应用nginx做代理时,用到它的轮训服务 #设置轮询名称 upstream zyy{ server 127.0.0.1:8080  #本机的apache服务 } server { listen ...

  2. C：应用于字符串处理函数

    出于对C的不够熟悉,在读代码的过程中,平凡出现的字符串处理函数,成为了一个理解代码的大问题. 为了更方便的读取和理解代码,特意将接触到的字符串处理函数列出,方便查询: 1.strstr(str1,st ...

  3. Activity 状态的保存和恢复

    Activity状态保存的两种情况 一.Activity状态保持概念 保存Activity的状态是非常重要的,例如我们在玩一个游戏的时候,突然来了一个电话,这个时候在接听完电话之后我们返回到游戏中,这 ...

  4. ASP.NET-FineUI开发实践-4

    最近实在没时间研究东西,FineUI一直也没进一步实践,但是还是很想学点东西,所以找了个课题研究了下,在论坛里看见了又下角的提醒,自己想了想做了一个,我不是大神,接触EXTJS很少,就是用到哪看哪,没 ...

  5. new关键字在虚方法的动态调用中的阻断作用

    关于new关键字在虚方法动态调用中的阻断作用,也有了更明确的理论基础.在子类方法中,如果标记 new 关键字,则意味着隐藏基类实现,其实就是创建了与父类同名的另一个方法,在编译中这两个方法处于动态方法 ...

  6. .NET 编译器（”Roslyn“）介绍

    介绍 一般来说,编译器是一个黑箱,源代码从一端进入,然后箱子中发生一些奇妙的变化,最后从另一端出来目标文件或程序集.编译器施展它们的魔法,它们必须对所处理的代码进行深入的理解,不过相关知识不是每个人都 ...

  7. Mybatis的学习总结(一)——使用配置文件实现增删改查

    在使用Mybatis作为持久层来进行操作数据库,有很多的操作都是一样的,基本上都是先得到session,然后调用session提供的相关方法进行操作,接着提交session,最后关闭session.那 ...

  8. vim学习心得（一）——Cygwin下vim配置

    关于Vi有很多传说.其中最为著名的是: “Vi是编辑器之神,Emacs是神的编辑器” Emacs没有用过,但是Vi在Linux经常使用,所以,掌握好vi非常重要!!! Vim(Vi Improved) ...

  9. golang byte转string 字节数组转字符串的问题

    golang语言本身就是c的工具集,开发c的程序用到的大部分结构体,内存管理,携程等,golang基本都有,他只是在这个基础上又加了一些概念这里说一个很小的问题,就是字节数组转string的问题,网上 ...

  10. div边框阴影的实现【转载】

    box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2p ...