实现方法一：

自定义input file样式；一般都是通过隐藏input，通过定义label来实现。这种做法要注意的是label的for属性要指定input对应的id;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			#file {
  8. 				display: none;
  9. 			}
  10. 			label {
  11. 				padding: 6px 15px;
  12. 				border-radius: 18px;
  13. 				background: #2F9DEA;
  14. 				color: #FFF;
  15. 				border: 1px solid #49A9ED;
  16. 				box-shadow: inset 0px 0px 3px #FFF;
  17. 			}
  18. 			label:focus,
  19. 			label:active {
  20. 				box-shadow: none;
  21. 			}
  22. 		</style>
  23. 	</head>
  24. 	<body>
  25. 		<div>
  26. 			<label for="file">
  27. 				<input type="file" id="file" />上传文件
  28. 			</label>
  29. 		</div>
  30. 	</body>
  31. </html>

效果如下：

点击后效果：

实现方法二：

  1. <style type="text/css">
  2. /*a  upload */
  3. .a-upload {
  4. 	padding: 4px 10px;
  5. 	height: 20px;
  6. 	line-height: 20px;
  7. 	position: relative;
  8. 	cursor: pointer;
  9. 	color: #888;
  10. 	background: #fafafa;
  11. 	border: 1px solid #ddd;
  12. 	border-radius: 4px;
  13. 	overflow: hidden;
  14. 	display: inline-block;
  15. 	*display: inline;
  16. 	*zoom: 1
  17. }
  18.  
  19. .a-upload  input {
  20. 	position: absolute;
  21. 	font-size: 100px;
  22. 	right: 0;
  23. 	top: 0;
  24. 	opacity: 0;
  25. 	filter: alpha(opacity = 0);
  26. 	cursor: pointer
  27. }
  28.  
  29. .a-upload:hover {
  30. 	color: #444;
  31. 	background: #eee;
  32. 	border-color: #ccc;
  33. 	text-decoration: none
  34. }
  35.  
  36. .file {
  37. 	position: relative;
  38. 	display: inline-block;
  39. 	background: #D0EEFF;
  40. 	border: 1px solid #99D3F5;
  41. 	border-radius: 4px;
  42. 	padding: 4px 12px;
  43. 	overflow: hidden;
  44. 	color: #1E88C7;
  45. 	text-decoration: none;
  46. 	text-indent: 0;
  47. 	line-height: 20px;
  48. }
  49.  
  50. .file input {
  51. 	position: absolute;
  52. 	font-size: 100px;
  53. 	right: 0;
  54. 	top: 0;
  55. 	opacity: 0;
  56. }
  57.  
  58. .file:hover {
  59. 	background: #AADFFD;
  60. 	border-color: #78C3F3;
  61. 	color: #004974;
  62. 	text-decoration: none;
  63. }
  64. </style>

　　

  1. <div>
  2. 	<a href="javascript:void(0);" class="a-upload"> <input type="file"
  3. 		name="" id="">点击这里上传文件
  4. 	</a>
  5.  
  6. 	<a href="javascript:void(0);" class="file">选择文件 <input type="file"
  7. 		name="" id="">
  8. 	</a>
  9. </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. 常用html元素的取值和赋值方法总结

    1.获得type类型为TEXT或者AREATEXT的值 var textval = $("#text_id").attr("value"); var textv ...

  2. 95秀-dialog 进度对话框 实用工具

    工具Util public class DialogUtil {     public static ProgressDialogView progressDialog;     /**      * ...

  3. HUD 1251 难题统计

    /* 这题倒是没啥难度 字典树可搞 但是吧 空间是个问题 开始写成这样 struct node { int next[27],sum[27]; bool over; }t[maxn]; 死活过不了 开 ...

  4. 30款jQuery常用网页焦点图banner图片切换 下载 （转）

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  5. tomcat加载不了spring-webjar终极解决办法

    Problems: I included: all Spring libs, Apache Tomcat 7.0 library in Build Path but it still gives er ...

  6. linux查询当前进程数的命令

    $command = "ps aux | grep  'zb_insure/get_order_info_from_queue.php' | grep -v 'grep' |  grep - ...

  7. EF中使用Contains方法

    第一种情况 var db=new ECEntities(); var list=new []{"8","9"}; var result=from a in db ...

  8. jquery的几种异步请求，ajax

    http://blog.csdn.net/a5489888/article/details/8523316

  9. 解释DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci

    解释DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci 在创建数据库的时候,经常用到一句:CREATE DATABASE `tpcms` DEFAUL ...

  10. Oracle 11g随Redhat 5系统自动启动与关闭的设置方法

    最近,ORACLE系统基本调试通过,是时候设置ORACLE随RHEL自动启动与关闭服务的时候了,之所以把这个任务放在最后来做,是因为我觉得这个应该不会很难,但真正实施起来,还是遇到了个不小的障碍:写好 ...