input[type=file]去掉“未选择任何文件”带效果图的哦~~~

最新推荐文章于 2024-08-23 10:17:03 发布

itfallrain

最新推荐文章于 2024-08-23 10:17:03 发布

阅读量7k

点赞数 1

分类专栏：前端js,css

本文为博主原创文章，未经博主同意不得转载

本文链接：https://blog.csdn.net/qq_38215042/article/details/86549289

版权

前端js,css 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

给你们讲讲我实现的原理吧，那就是利用子绝父相定位，把input标签定到div标签上，这样点击还是input标签，只不过把他隐藏掉了
原默认样式图

在这里插入图片描述
实现方式

效果图

text.html

 <div class="surfaceThree">选择文件
      <input type="file" title=" ">
 </div>

text.css

.surfaceThree {
    position: relative;
    height: 30;
    width: 120px;
    background: #d80505;
    border-radius: 6px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #fff;
}

.surfaceThree input {
    position: absolute;
    top: 5px;
    right: -110px;
    /* color: #fff; */
    height: 30px;
    /* 重点代码让input隐藏 */
    opacity: 0;
}