CSS ::file-selector-button伪元素修改input上传文件按钮的样式

news2025/2/26 18:07:30
默认样式

在这里插入图片描述

修改后的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>type:file</title>
    <style>
        .inputFile{
            /* 隐藏按钮后的文字 */
            font-size: 0;
        }
        /* 修改按钮后的文字颜色 */
        .inputFile[type="file"] {
            color: gray;
        }
        .inputFile::file-selector-button {
            height: 3rem;
            font-size: 1rem;
            color: #fff;
            border-radius: .25rem;
            border: 1px solid #f14a24;
            padding: .75rem 1rem;
            background-color: #f14a24;
            box-sizing: border-box;
            font-family: inherit;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="file" class="inputFile">
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/767551.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

HTTP 请求走私漏洞（HTTP Request Smuggling）

HTTP 请求走私漏洞（HTTP Request Smuggling）

一、什么是Http 请求走私漏洞&#xff1f; HTTP请求走私漏洞&#xff08;HTTP Request Smuggling&#xff09;是一种安全漏洞&#xff0c;利用了HTTP协议中请求和响应的解析和处理方式的不一致性。攻击者通过构造特定的恶意请求&#xff0c;以欺骗服务器和代理服务器&#xff0…
阅读更多...
微信小程序-地图上的图标计算旋转值朝向经纬度计算

微信小程序-地图上的图标计算旋转值朝向经纬度计算

废话不多说&#xff0c;开整 // 参数为寄件人经纬度和收件人经纬度 // 根据寄收件人经纬度弧度π进行rotate旋转计算 const getRotate (po1, po2) > {if (!(po1 && po2)) return 0const lng_a po1.longitudeconst lat_a po1.latitudeconst lng_b po2.longitud…
阅读更多...
pg谓词下推分析（一）

pg谓词下推分析（一）

谓词下推分析&#xff08;一&#xff09; 本文基于pg13.8。 谓词下推阶段即是把约束条件下推对条件涉及的表上&#xff08;RelOptlnfo&#xff09;&#xff0c;其中同时会涉及到等价类的推导&#xff0c;及建立逻辑连接关系&#xff08;外连接的SpecialJoinInfo结构的创建与设…
阅读更多...
apple pencil二代平替笔哪个好用？苹果平板平替笔排行

apple pencil二代平替笔哪个好用？苹果平板平替笔排行

光是一款Apple Pencil&#xff0c;就卖到了接近一千多块&#xff0c;信息对于很多人来说都觉得太贵了。事实上&#xff0c;由于平替电容笔的性价比也非常高&#xff0c;因此它还是值得一试的。不管是学习&#xff0c;写作&#xff0c;还是绘画&#xff0c;这支平替电容笔&#…
阅读更多...
力扣 135. 分发糖果

力扣 135. 分发糖果

题目来源&#xff1a;https://leetcode.cn/problems/candy/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a; 先从左往右比较&#xff0c;右边孩子评分比左边高就多发1颗糖&#xff0c;否则就只发1颗&#xff1b;再从右往左比较&#xff0c;左边孩子评分…
阅读更多...
Element ui table展开行中，某些行需要展开，某些行不需要展开

Element ui table展开行中，某些行需要展开，某些行不需要展开

1.templatetemplate里面对应的代码&#xff1a; <el-table :data"menuList" style"width: 100%" :row-class-name"isShowIcon"><el-table-column type"expand"><template slot-scope"props" v-if"prop…
阅读更多...
阿里云GPU服务器使用教程_创建_连接_GPU驱动_实践教程

阿里云GPU服务器使用教程_创建_连接_GPU驱动_实践教程

阿里云GPU服务器怎么使用&#xff1f;先创建GPU实例、GPU云服务器远程连接&#xff0c;为GPU云服务器安装GPU驱动、安装GRID驱动等&#xff0c;使用GPU服务器部署NGC环境、GPU AI模型训练教程、在GPU实例上使用RAPIDS加速机器学习任务、RAPIDS加速机器学习等使用教程&#xff0…
阅读更多...
AI代码生成能力进一步提高，网友：程序员饭碗保不住了？

AI代码生成能力进一步提高，网友：程序员饭碗保不住了？

文章内容来源于公众号——布博士&#xff08;擎创科技资深产品专家&#xff09; 自chatGPT出现以来&#xff0c;人工智能&#xff08;AI&#xff09;迅速发展成为科技行业的重要领域。人工智能已应用于医疗、金融、交通、农业等各个领域。人工智能代码生成的进步提高了软件开发…
阅读更多...
Ingress：集群进出流量的总管

Ingress：集群进出流量的总管

Service 很有用&#xff0c;但也只能说是“基础设施”&#xff0c;它对网络流量的管理方案还是太简单&#xff0c;离复杂的现代应用架构需求还有很大的差距&#xff0c;所以 Kubernetes 就在 Service 之上又提出了一个新的概念&#xff1a;Ingress。 Service 还有一个缺点&…
阅读更多...
el-dialog 添加loading；avue-form 表单插槽

el-dialog 添加loading；avue-form 表单插槽

效果: 第一步&#xff1a;custom-class"publishDialog" 新起一个类名 <el-dialog title"发布配置" custom-class"publishDialog" :visible.sync"publishDialogVisible" width"800px" :append-to-body"true":b…
阅读更多...
【电路效应】信号处理和通信系统模型中的模拟电路效应研究（SimulinkMatlab代码实现）

【电路效应】信号处理和通信系统模型中的模拟电路效应研究（SimulinkMatlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码、Simulink仿真实现 &#x1f4a5;1 概述 在信号处理和通信系统模型中&#xff0c;模拟电路效应研究是指考虑到实际电路的特性对信号进行建模和分析的过程。模拟电路效应…
阅读更多...
C++中main()函数和命令行参数介绍

C++中main()函数和命令行参数介绍

C中main()函数和命令行参数介绍 在C中&#xff0c;main()函数是程序的入口点&#xff0c;它是一个特殊的函数&#xff0c;在程序开始执行时被首先调用&#xff0c;也是程序结束时的最后一个被执行的函数。main() 函数的类型始终为 int&#xff0c;根据C标准&#xff0c;main() …
阅读更多...
Petalinux 无法识别PHY ADDR 显示地址为FF 或者-1

Petalinux 无法识别PHY ADDR 显示地址为FF 或者-1

BD文件使能了GEM 但是系统启动以后ifconfig发现没有ETH0 解决办法有两种 1&#xff0c;在DTS settings下设置对应的板卡 2.直接修改设备树&#xff0c;第二种方法对没有linux基础的朋友不是那么友好
阅读更多...
地面点云提取：Autoware预处理ray_ground_filter节点解析 + 解决ray_ground_filter无输出的问题

地面点云提取：Autoware预处理ray_ground_filter节点解析 + 解决ray_ground_filter无输出的问题

文章目录 一、解决Autoware的ray_ground_filter节点无点云输出的问题二、ray_ground_filter节点代码分析2.1.监听bask_link和velodyne之间的TF2.2 裁切过高点云2.3 消除雷达近身反射点的影响2.4 角度和距离微分&#xff08;转换到柱坐标&#xff09;2.5 地面判断(核心部分) 一、…
阅读更多...
TextView 必填项pro版

TextView 必填项pro版

优点 基本解决对齐方式,可以设置前缀隐藏和显示 /*** https://blog.csdn.net/u013982652/article/details/94404711* Android自定义TextView实现必填项前面的*号* 另一种实现方式(推荐使用这种,有非必填情况的话不会有对齐问题)* <p>* <cn.mvp.mlibs.weight.MiRequire…
阅读更多...
2023年网络安全面试题：详细答案解析与最佳实践分享

2023年网络安全面试题：详细答案解析与最佳实践分享

如果在数据来源和网络分享方面存在侵权问题&#xff0c;请立即联系我以删除相关内容。 一句话木马 【基本原理】 利用文件上传漏洞&#xff0c;往目标网站中上传一句话木马&#xff0c;然后可以通过中国菜刀chopper.exe来获取和控制整个网站目录。表示后面即使执行错误&…
阅读更多...
ZooKeeper原理剖析

ZooKeeper原理剖析

1.ZooKeeper简介 ZooKeeper是一个分布式、高可用性的协调服务。在大数据产品中主要提供两个功能&#xff1a; 帮助系统避免单点故障&#xff0c;建立可靠的应用程序。提供分布式协作服务和维护配置信息。 2.ZooKeeper结构 ZooKeeper集群中的节点分为三种角色&#xff1a;Le…
阅读更多...
curl: (56) Recv failure : Connection reset by peer

curl: (56) Recv failure : Connection reset by peer

文章目录 背景原因可能如下1. 服务器端关闭了连接2. 网络问题3. 防火墙或代理问题4. 服务器负载过高 解决办法 背景 docker容器里有http服务&#xff0c;今天在docker容器重启时&#xff0c;去调用http接口&#xff0c;出现了以下错误&#xff1a; curl: (56) Recv failure :…
阅读更多...
Explain执行计划中各个字段的含义

Explain执行计划中各个字段的含义

Explain执行计划中各个字段的含义 1、Explain有什么用2、Explain有哪些信息3、Explain执行计划详解 1、Explain有什么用 当Explain 与 SQL语句一起使用时&#xff0c;MySQL 会显示来自优化器关于SQL执行的信息。也就是说&#xff0c;MySQL解释了它将如何处理该语句&#xff0c…
阅读更多...
Docker 架构解析：多角度解析 Docker 引擎与容器运行时

Docker 架构解析：多角度解析 Docker 引擎与容器运行时

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023