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,一经查实,立即删除!

相关文章

【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…

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存储池冗余数

【复盘】记录一次类型不一致导致的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…

数据结构与算法——什么是线性表(线性存储结构)

我们知道&#xff0c;具有“一对一”逻辑关系的数据&#xff0c;最佳的存储方式是使用线性表。那么&#xff0c;什么是线性表呢&#xff1f; 线性表&#xff0c;全名为线性存储结构。使用线性表存储数据的方式可以这样理解&#xff0c;即“把所有数据用一根线儿串起来&#xf…

餐饮业油烟在线监测系统的具体应用 安科瑞 许敏

摘要&#xff1a;本文利用物联网技术&#xff0c;构建了一套餐饮企业智能油烟在线监测系统&#xff0c;该系统前台由厨房端和管道端组成&#xff0c;通过网关接入云平台管理系统&#xff0c;实时监控烟道阀门的启闭、变频风机的启停与风速及功率调节、油烟浓度数据等。结合动态…

随手笔记——如何手写高斯牛顿法

随手笔记——如何手写高斯牛顿法 说明源代码 说明 将演示如何手写高斯牛顿法 源代码 #include <iostream> #include <chrono> #include <opencv2/opencv.hpp> #include <Eigen/Core> #include <Eigen/Dense>using namespace std; using names…

HBase

一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式数据存储…

【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3(GDB调试器的基础使用)

【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3&#xff08;GDB调试器的基础使用&#xff09; 目录 【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3&#xff08;GDB调试器的基础使用&#xff09;背景gdb的一些指令gdb实际运用显示代码运行程…

【NLP】transformers的位置编码

一、背景 本文是“实现的变压器”系列的第二篇。它从头开始引入位置编码。然后,它

划片机的作用将晶圆分割成独立的芯片

划片机是将晶圆分割成独立芯片的关键设备之一。在半导体制造过程中&#xff0c;晶圆划片机用于将整个晶圆切割成单个的芯片&#xff0c;这个过程被称为“晶圆分割”或“晶圆切割”。 晶圆划片机通常采用精密的机械传动系统、高精度的切割刀具和先进的控制系统&#xff0c;以确保…