input文件上传样式美化

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
       .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>
  </head>
  <body>
    <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>

引用：input样式美化

相关阅读:
字符串处理(包括正则生成工具)
php.ini 个别字段笔记
php-5.4 升级到 php7.2
【mysql笔记】针对 group_concat 长度限制
七牛，前端上传图片
PHP 替换特殊空白符
【代码块】定时任务<swoole> 100%无人值守
安装nodejs
linux安装beanstalkd
个人笔记上传 -- redis安装

原文地址：https://www.cnblogs.com/wlei5206/p/15649579.html