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

梦里梦外; 2022-03-25 06:42 604阅读 0赞

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

![在这里插入图片描述][2019011910031516.png]  
实现方式  
![在这里插入图片描述][20190119100438207.png]  
效果图  
![在这里插入图片描述][20190119100413610.png]  
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;
    }

[2019011910031516.png]: /images/20220325/0d6090ae9c504f2b81b0b59e23e7c8b7.png
[20190119100438207.png]: /images/20220325/7f0269cffcad44b38f727f6f4a12af0d.png
[20190119100413610.png]: /images/20220325/2ce128bd4b214a20b7ae757318393a61.png

发表评论取消回复

表情：

评论列表（有 0 条评论，604人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS查看系统所有字体(带效果图)

[效果图][Link 1] NSString sampStr = @"开发者ADreamClusive"; NSMutableAttributedS

古城微笑少年丶/ 2024年02月18日 23:48/ 0 赞/ 9 阅读

相关 JAVA排序之选择排序带图和code

选择排序介绍选择排序(Selection sort)是一种简单直观的排序算法。它的基本思想是：首先在未排序的数列中找到最小(or最大)元素，然后将其存放到数列的起始位

小灰灰/ 2023年10月13日 21:47/ 0 赞/ 6 阅读

相关 input file 设置样式去掉选择文件的样式

原有的input file 样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

痛定思痛。/ 2023年08月17日 16:22/ 0 赞/ 167 阅读

相关 python的文件操作——带图详解

文章目录文件操作之读文件说明读取文件实操当前包中读取文件操作之写文件二进制拷贝图片文

迈不过友情╰/ 2023年02月23日 08:16/ 0 赞/ 89 阅读

相关如何去掉Mac窗口截图自带的阴影呢？教程来了不要错过哦

小编为了方便没有使用截图软件，而是通过快捷键 Commond + Shift + 5 来激活macOS的系统截图，通过“捕捉所选窗口”的方式来截取某个窗口的截图。然后，默认的系

约定不等于承诺〃/ 2023年01月12日 10:10/ 0 赞/ 368 阅读

相关 qt自定义搜索框（超简单，带效果图）

1. 什么也不要说，先上效果图： ![Center][] 2. 代码头文件： ifndef APPSEARCHLINE_H define APP

电玩女神/ 2022年08月20日 11:11/ 0 赞/ 253 阅读

相关 ORACLE - 未找到任何数据

create or replace procedure pro_error_data is d_sql varchar(100); d_name

Dear 丶/ 2022年04月24日 09:24/ 0 赞/ 421 阅读

相关 css+js实现下拉框带效果图

test.html <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this

系统管理员/ 2022年03月29日 11:23/ 0 赞/ 314 阅读

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

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

梦里梦外;/ 2022年03月25日 06:42/ 0 赞/ 605 阅读

相关 jQuery-File-Upload选择文件后仍显示"非选择任何文件"

问题描述结合jQuery-File-Upload使用<input type="file">上传文件时，明明选择了文件，但仍显示"非选择任何文件"。不使用jQuery

绝地灬酷狼/ 2022年01月31日 14:47/ 0 赞/ 327 阅读