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

前端  /  管理员 发布于 7年前   147

效果：

<!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实现Tab页切换效果的示例代码
    下一条：
    css控制元素高度实现自底向上和自顶向下的方法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客