css input[type=file] 样式美化(input上传文件样式 )详解编程语言

效果：

 

 !doctype html 

 html 

 head 

 meta charset="utf-8" 

 title 无标题文档 /title 

 style 

 /*样式1*/ 

 .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 

 /*样式2*/ 

 .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 

 /head 

 body 

 a href="javascript:;" 

 input type="file" name="" id="" 点击这里上传文件 

 a href="javascript:;" 选择文件 

 input type="file" name="" id="" 

 /body 

 /html 

总结

以上所述是小编给大家介绍的css input[type=file] 样式美化(input上传文件样式 )，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/16849.html