CSS修改默认的input标签中file(文件上传)样式

学习笔记 马富天 2016-05-03 10:45:29 99 0

【摘要】很多时候我们觉得input标签中type=“file”的样式很难看,可是通常我们又不知道怎么修改它的样式,然它变得美观一些,下面是我用CSS实现修改input中type=“file”的默认样式。

直接上代码:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>CSS修改默认的input标签中file(文件上传)样式</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 			.wrap{
  13. 				position:relative;
  14. 				overflow:hidden;
  15. 				margin-right:4px;
  16. 				display:inline-block;
  17. 				padding:4px 10px;
  18. 				line-height:18px;
  19. 				text-align:center;
  20. 				vertical-align:middle;
  21. 				cursor:pointer;
  22. 				background:#D8450B;
  23. 				border:1px dotted #D8450B;
  24. 				border-radius:4px;
  25. 				-webkit-border-radius:4px;
  26. 				-moz-border-radius:4px;
  27. 			}
  28. 			.wrap span{				
  29. 				color:#FFF;
  30. 			} 
  31. 			.wrap .file{
  32. 				position:absolute;
  33. 				top:0;
  34. 				right:0;
  35. 				margin:0;
  36. 				border:solid transparent;
  37. 				opacity:0;
  38. 				filter:alpha(opacity=0);
  39. 				cursor: pointer;
  40. 			} 
  41. 		</style>
  42. 	</head>
  43. 	<body>
  44. 		<form action="">
  45. 			<table>
  46. 				<tr>
  47. 					<td>默认样式:</td>
  48. 					<td><input type="file" /></td>
  49. 				</tr>
  50. 				<tr>
  51. 					<td>修改后样式:</td>
  52. 					<td>
  53. 						<div class="wrap">
  54. 							<span>添加附件</span>
  55. 							<input id="fileupload" class="file" type="file" />
  56. 						</div>
  57. 					</td>
  58. 				</tr>
  59. 			</table>
  60. 		</form>
  61. 		<p>主要思想是:把file/input(position:absolute)使用一个div(position:relative)包装起来,然后再将file/input给隐藏起来,那就实现了修改样式的效果,其实并非真正修改了file/input的样式,而是利用wrap的样式遮盖了file/input。</p>
  62. 	</body>
  63. </html>

效果图如下:

请输入图片名称

主要的思想在于:把file/input(position:absolute)使用一个div(position:relative)包装起来,然后再将file/input给隐藏起来,那就实现了修改样式的效果,其实并非真正修改了file/input的样式,而是利用wrap的样式遮盖了file/input。

你可以把上面的代码复制下来,直接运行一下。

版权归 马富天PHP博客 所有

本文标题:《CSS修改默认的input标签中file(文件上传)样式 》

本文链接地址:http://www.mafutian.net/85.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

2

1

上一篇《 PHP自带函数filter_var()验证邮箱、url和IP地址 》 下一篇《 MySQL如何按月按年按天查询统计数据? 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多