css input[type=file] 样式美化(input上传文件样式 )

2024-07-11 08:59:15

字体：大中小

来源：转载

供稿：网友

效果：

<!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 style="padding: 10px">  <a href="javascript:;" class="a-upload">      <input type="file" name="" id="">点击这里上传文件  </a>  <a href="javascript:;" class="file">选择文件      <input type="file" name="" id="">  </a>  </body>  </html>

总结

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

上一篇：css控制元素高度实现自底向上和自顶向下的方法

下一篇：css3 column实现卡片瀑布流布局的示例代码