zoukankan      html  css  js  c++  java
  • 给上传文件的input控件“美容”

    在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。

    demo:

      html代码

    1 <body>
    2     <form action="" method="post" enctype="multipart/form-data">
    3         <a href="#" class="a-upload">
    4             <input type="file" name="file" id="file">点击这里上传图片</a>
    5     </form>
    6 </body>

      css代码

     1     <style>
     2     .a-upload {
     3         padding: 4px 10px;
     4         width: 200px;
     5         height: 30px;
     6         box-sizing: border-box;
     7         line-height: 20px;
     8         position: relative;
     9         cursor: pointer;
    10         color: #888;
    11         background: #fafafa;
    12         border: 1px solid #ddd;
    13         border-radius: 4px;
    14         overflow: hidden;
    15         display: inline-block;
    16         *display: inline;
    17         *zoom: 1;
    18         top: 5px;
    19     }
    20     
    21     .a-upload input {
    22         position: absolute;
    23         font-size: 100px;
    24         opacity: 0;
    25         filter: alpha(opacity=0);
    26         cursor: pointer;
    27         width: 200px;
    28         height: 30px;
    29         left: 0;
    30         top: 0;
    31     }
    32     
    33     .a-upload:hover {
    34         color: #444;
    35         background: #eee;
    36         border-color: #ccc;
    37         text-decoration: none
    38     }
    39     </style>

    示例下载

  • 相关阅读:
    Windows下安装redis
    flask-redirect
    MySQLHelper
    配置信息
    注释习惯
    SQL2012 附加数据库提示5120错误解决方法
    Union-SQL Server学习笔记
    存储过程
    模糊查询&&日期时间操作
    数据库表的设计
  • 原文地址:https://www.cnblogs.com/zk-zhou/p/6816522.html
Copyright © 2011-2022 走看看