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

默认样式

在这里插入图片描述

修改后的样式

在这里插入图片描述

<!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.mzph.cn/news/3875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CNN学习记录

目录 CNN基础知识——卷积(Convolution)、填充(Padding)、步长(Stride): 卷积的三种模式:full, same, valid:

【MySQL】查询进阶

查询进阶 数据库约束约束类型NULL , DEFAULT , UNIQUE 约束主键约束外键约束 聚合查询聚合函数group by子句HAVING 联合查询内连接外连接自连接子查询单行子查询多行子查询 数据库约束 约束类型 NOT NULL #表示某行不能储存空值 UNIQUE #保证每一行必须有唯一的值 DEFAULT #规…

CSS科技感四角边框

实现效果:使用before和after就可以实现,代码量不多,长度颜色都可以自己调整 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}html,body{…

PostgreSQL MVCC的弊端

数据库有很多种&#xff08;截至 2023 年 4 月有 897 个&#xff09;。面对如此多的数据库&#xff0c;很难知道该选择什么&#xff01;但有一个有趣的现象&#xff0c;互联网集体决定新应用程序的默认选择。在 2000 年代&#xff0c;传统观点选择 MySQL 是因为像 Google 和 Fa…

vue3+vite+pinia+vue-router+ol项目创建及配置

一、vite (一)、定义 vite官网 (二)、操作步骤 注意&#xff1a;两种方式创建目录结构一致 方式一&#xff1a;vite创建脚手架命令&#xff1a; 命令行&#xff1a;npm create vitelatest 然后选择 方式二&#xff1a;命令行直接声明带上vue 二、pinia (一)、定义 定义&#xf…

快速批量改名文件!随机字母命名,让文件名更有创意!

想要让文件名更加有创意和个性化吗&#xff1f;不妨尝试使用随机字母来批量改名文件&#xff01;无论是照片、文档还是其他文件&#xff0c;只需要简单的几个步骤&#xff0c;您就可以为它们赋予一个独特的随机字母命名。这不仅可以帮助您整理文件&#xff0c;还能增加一些乐趣…

非50欧系统阻抗的S参数测试

1. S参数依赖于系统阻抗 S参数的定义需要约定一个系统阻抗。同一个微波电路&#xff0c;在不同系统阻抗下的S参数是不同的。例如&#xff0c;50欧电阻在50欧系统阻抗下的S11为零&#xff0c;是没有反射的匹配状态&#xff1b;但50欧电阻在75欧系统阻抗下的S11不为零&#xff0…

WebRTC系列--WebRTC音频支持RedFEC的修改

文章目录 1. FEC流程综述1.1 offer中sdp的red1.2 setRemoteSdp中创建red编码流程2. 编码端2.1 编码缓存数据2.2 RED协议简介3. 解码端WebRTC在最新的代码中对opus的编码的包,默认使用red的方式进行一次冗余处理;冗余包在解码端的处理在其他版本中都有支持;这篇文章讲分两部分…

Orange:一个基于 Python 的数据挖掘可视化平台

本篇介绍一个适合初学者入门的机器学习工具。 Orange 简介 Orange 是一个开源的数据挖掘和机器学习软件。Orange 基于 Python 和 C/C 开发&#xff0c;提供了一系列的数据探索、可视化、预处理以及建模组件。 Orange 拥有漂亮直观的交互式用户界面&#xff0c;非常适合新手进…

计算机网络 day11 tcpdump - 传输层 - netstat - socket - nc - TCP/UDP头部

目录 故障排查 tcpdump抓包工具 传输层&#xff08;TCP和UDP协议&#xff09; 传输层的作用 应用程序和端口号有什么关系&#xff1f; 传输层端对端连接实现拓扑图 如何查看自己的linux机器开放了哪些端口&#xff1f; 1、netstat(network status 网络的状态) netsta…

【ceph】存储池pg个数如何设置

存储池pg个数如何设置 参考官方文档说明&#xff1a;https://old.ceph.com/pgcalc/参数说明TargePGs per OSD&#xff1a;每个OSD的pg数OSD#存储池包含osd个数%Data存储池写入数据占总OSD容量百分比Size存储池冗余数

安全生产简记

文章目录 面向失败的设计冗余设计避免单点故障宏观多活架构服务能力与依赖调用自我保护为失败准备预案精细化监控体系自动化运维管控故障与攻防演练锤炼容灾应急能力最佳实践面向失败的设计 什么样的失败?硬件问题软件Bug配置变更错误系统恶化外部攻击依赖库问题依赖服务问题…

git 删除提交内容、删除分支

1.删除某个提交之后的所有提交内容 1、恢复到指定提交位置git reset --hard commitid &#xff08;commitid可以git log命令查看&#xff09;已经恢复到指定记录位置&#xff0c;本地已经没有了2、强制推送到线上 git push -f2.删除指定commit提交&#xff08;非最后一次&…

掌握 Seaborn:Python 数据可视化高级篇

在前两篇文章中&#xff0c;我们探讨了 Seaborn 的基础和中级功能&#xff0c;包括了如何绘制各种统计图形以及如何控制图形的样式和颜色。在这篇高级篇中&#xff0c;我们将更进一步&#xff0c;介绍如何使用 Seaborn 创建复合图形&#xff0c;如网格图、因子图和聚类热图等。…

MongoDB练习

目录 mongodb作业 1. 创建一个数据库 名字grade 2. 数据库中创建一个集合名字 class 3. 集合中插入若干数据 文档格式如下&#xff5b;name:zhang,age&#xff1b;10,sex:m,hobby:[a,b,c]&#xff5d;hobby: draw sing dance basketball football pingpong computer …

【复盘】记录一次类型不一致导致的Kafka消费异常问题

背景 业务主要是通过A系统向B系统写入Kafka&#xff0c;然后B系统消费Kafka 将结果写到Kafka中&#xff0c;A进行消费最终结果。 在整个流程中&#xff0c;A写入Kafka会写入一张 record1表记录&#xff0c;然后在A消费最终结果的时候也记录一张record2表。主要改动的话 只是B系…

设计模式07-责任链模式

责任链模式属于行为设计模式&#xff0c;常见的过滤器链就是使用责任链模式设计的。 文章目录 1、真实开发场景的问题引入2、责任链模式讲解2.1 核心类及类图2.2 基本代码 3、利用构建者模式解决问题4、责任链模式的应用实例5、总结5.1 解决的问题5.2 使用场景5.3 优缺点 1、真…

MFC 基于数据库的管理系统

文章目录 初始化设置菜单 添加数据库类创建数据库配置数据库 全部代码 初始化 创建文件选择基于CListView 初始化数据 public:CListCtrl& m_list;CSQLView::CSQLView() noexcept:m_list(GetListCtrl()) {// TODO: 在此处添加构造代码}void CSQLView::OnInitialUpdate() {C…

Hybird开发,webview和H5交互

H5调用原生功能 封装一个统一的接口&#xff0c;供H5页面调用原生的功能&#xff0c;比如获取设备信息、打开相机、分享内容等。这样&#xff0c;H5页面只需调用这个接口&#xff0c;而无需关心具体的原生实现细节。 //定义一个类&#xff0c;用JavascriptInterface注解来注释…