搜索
查看: 2775|回复: 0

input file美化

[复制链接]

691

主题

1032

帖子

2564

积分

管理员

本论坛第一帅

Rank: 9Rank: 9Rank: 9

积分
2564

热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2021-6-21 20:10:46 | 显示全部楼层 |阅读模式
系统默认的input file样式确实很难看,今天将其进行了美化。相关的css样式分享如下:
首先看看效果咋样
1133.jpg

上传图片后效果
1144.jpg
Deom
html部分
  <div class="upload-file">
        <input type="file" class="input-file" name="image" multiple="true">  
        <span class="tip">点击上传图片</span>
  </div>

css部分
 .upload-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;
    }

    .upload-file span{ //单行显示
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .upload-file:hover{ //简单的hover效果
      font-size: 15px;
      border-color: rgb(39, 226, 81);
    }

    .upload-file input[zxsq-anti-bbcode-type='file']{
      height: 100%;
      width: 100%;
      position: absolute; //设置为绝对定位,不会影响到其他元素
      top: 0;
      right: 0;
      opacity: 0;   //透明度为0
      filter: alpha(opacity=0);
      cursor: pointer;
    }

利用change方法设置文件名
 <script>
    var fileInput = document.querySelector('.input-file');
    var tip = document.querySelector('.tip');
    fileInput.addEventListener('change',function(e){ //监听change事件,选择文件后触发
      if(this.files.length === 1){ //处理文件名
        tip.textContent = this.files[zxsq-anti-bbcode-0].name;
      }else {
        tip.textContent = '已选择 ' + this.files.length + ' 个文件';
      }
    })
</script>

有志者,事竟成,破釜沉舟,百二秦关终属楚. 苦心人,天不负, 卧薪尝胆 ,三千越甲可吞吴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表