实现方法一：

自定义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. checkbox遍历操作, 提交所有选中项的值

    <div class="content_list pad_10 hidden" > <h3>修改可配送地区</h3> <input typ ...

  2. ViewPage 大圣归来 原生示例

    VP简介 android-support-v4.jar 是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而ViewPage就是其中之一,利用它,我 ...

  3. Nagios设置只监控不报警

    设置全部监控项都开启邮件报警: vim /usr/local/nagios/etc/nagios.cfg 设置 enable_notifications=1    1为开启,0为关闭     如个别监 ...

  4. bat 小工具

    @echo ************************************************************************:start@echo offset /p ...

  5. 常用的JavaScript正则匹配规则代码收藏，很实用

    收集一些常用的JavaScript正则表达式匹配规则,比如匹配电话号码.Email.中文字符.身份证号.邮编.QQ号.过滤空白行.匹配特定数字等.觉得这玩意是很有用的,只不过自己水平菜,老是自己写不出 ...

  6. ECharts使用心得——矩阵树图

    1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ...

  7. (转)關於flashback query的ORA-01466錯誤

    摘自:http://blog.sina.com.cn/s/blog_70a2bdb80100pqid.html 使用Oracle 10g 新特性flashback query來查詢過去修改並已提交的記 ...

  8. ural 1294 Mars Satellites

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> u ...

  9. altium designer不经过原理图直接在空白pcb上加封装然后画线

    如果是复杂点的PCB,建议还是画下SCH,如果PCB只有几个元件,那么可以用这种方法,想不画原理图,直接进行布线,往往是很多初学者最想知道的,但是这也一定不是初学者能学到的.因为你买的书,都是按画PC ...

  10. 如何在AD6(altium designer 6.x)中设置PCB大小

    做一块板子,体积比较的大(长度有20CM),而AD默认的长度只有15cm,满足不了本人要求.在网上找到了解决方法: 先在Mechanical(机械层,如Mechanical1)下绘制一个板框,也就是你 ...