按钮样式的文件选择框

最新推荐文章于 2023-07-12 16:35:20 发布

diansansan1077

最新推荐文章于 2023-07-12 16:35:20 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/hdd1223/p/5653683.html

版权

<!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>

转载于:https://www.cnblogs.com/hdd1223/p/5653683.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diansansan1077

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
按钮样式的文件选择框

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选择文件</title> <style> .file { position: relative; ...
复制链接

扫一扫