按钮样式的文件选择框

最新推荐文章于 2021-07-19 12:08:16 发布

原创最新推荐文章于 2021-07-19 12:08:16 发布 · 473 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>选择文件</title>
    <style>
        .file {
          position: relative;
          display: inline-block;
          background: #55C4F2;
          border:none;
          border-radius: 4px;
          padding: 4px 12px;
          overflow: hidden;
          color: #1E88C7;
          text-decoration: none;
          text-indent: 0;
          line-height: 20px;
        }
        .file .upfile {
          position: absolute;
          font-size: 100px;
          right: 0;
          top: 0;
          opacity: 0;
        }
        #upfile{
          color: #ffffff;
          background: #55C4F2;
          border: none;
        }
        #upfile:hover{
          background: #AADFFD;
        }
    </style>
  </head>
  <body>
    <a class="file">
        <input type="file" name="" onchange="upfile.value=this.value" class="upfile">
        <input value="未选择任何文件" type="button" name="upfile" id="upfile">
    </a>
  </body>
</html>