自定义input file样式
Posted 居无常
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义input file样式相关的知识,希望对你有一定的参考价值。
实现方法一:
自定义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样式的主要内容,如果未能解决你的问题,请参考以下文章