当前位置： 首页 > news >正文

input时间表单默认样式修改（input[type=“date“]）

news 2026/5/22 1:25:55

一、时间选择的种类:

HTML代码：

<input type="date" value="2018-11-15" />

选择日期：
在这里插入图片描述

选择时间：

<input type="time" value="22:52" />

在这里插入图片描述

在这里插入图片描述

选择星期：

<input type="week" />

在这里插入图片描述

选择月份：

<input type="month" />

在这里插入图片描述

DateTime-Local类型：

<input type="datetime-local"/>

在这里插入图片描述

二、.对日期时间控件的样式进行修改

目前WebKit下有如下9个伪元素可以改变日期控件的UI：

::-webkit-datetime-edit – 控制编辑区域的
::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的
::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的
::-webkit-datetime-edit-month-field – 控制月份
::-webkit-datetime-edit-day-field – 控制具体日子
::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方
::-webkit-inner-spin-button – 这是控制上下小箭头的
::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
::-webkit-clear-button –这是控制清除按钮的

实例

1.问题--------date类型改变行高和高度那个小三角并不会根据大小调整，实在太丑了，所以决定把它隐藏掉。

/* 去掉date中上下小三角，但是保留input类型为number的小三角。 */

input[type=date]::-webkit-inner-spin-button { visibility: hidden; }

/----------用来移除叉叉按钮 鼠标移上去还会显示----------/

input[type=“date”]::-webkit-clear-button{ display:none; }

代码

    <style>/* 控制编辑区域的 */input[type="date"]::-webkit-datetime-edit{/* content: '起始时间'; */color: rgb(188,188,188); padding-left: 10px;}/* 控制年月日这个区域的 */input[type="date"]::-webkit-datetime-edit-fields-wrapper { background-color: #eee; } /* 这是控制年月日之间的斜线或短横线的 */input[type="date"]::-webkit-datetime-edit-text {color: blue; padding: 0 .3em; } /* 控制年字 */input[type="date"]::-webkit-datetime-edit-year-field { color: purple; } /* 控制月字 */input[type="date"]::-webkit-datetime-edit-month-field { color: red; } /* 控制日字 */input[type="date"]::-webkit-datetime-edit-day-field  { color: pink; } /*控制下拉小箭头的*/ input[type="date"]::-webkit-calendar-picker-indicator {display: inline-block;width: 15px;height: 15px;/* position: absolute;top: 12px;right: 0px; */border: 1px solid #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;background-color: #eee;/* background:url('../images/icon.png') -188px -99px; */background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);color: #666; } /* 去掉date中上下小三角，但是保留input类型为number的小三角。 */input[type=date]::-webkit-inner-spin-button { visibility: hidden; }/*----------用来移除叉叉按钮 鼠标移上去还会显示----------*/ /* input[type="date"]::-webkit-clear-button{display:none;} */</style>
</head>
<body><div class="time_box"><input type="date"></div>
</body>

默认—点击时间表单的效果

修改完后

三、以下的囊括了date，datetime，week，time等所用的伪元素：

input::-webkit-datetime-edit{}
input::-webkit-datetime-edit-fields-wrapper{}
input::-webkit-datetime-edit-ampm-field{}
input::-webkit-datetime-edit-day-field{}
input::-webkit-datetime-edit-hour-field{}
input::-webkit-datetime-edit-millisecond-field{}
input::-webkit-datetime-edit-minute-field{}
input::-webkit-datetime-edit-month-field{}
input::-webkit-datetime-edit-second-field{}
input::-webkit-datetime-edit-week-field{}
input::-webkit-datetime-edit-year-field{}
input::-webkit-datetime-edit-ampm-field:focus{}
input::-webkit-datetime-edit-day-field:focus{}
input::-webkit-datetime-edit-hour-field:focus{}
input::-webkit-datetime-edit-millisecond-field:focus{}
input::-webkit-datetime-edit-minute-field:focus{}
input::-webkit-datetime-edit-month-field:focus{}
input::-webkit-datetime-edit-second-field:focus{}
input::-webkit-datetime-edit-week-field:focus{}
input::-webkit-datetime-edit-year-field:focus{}
input::-webkit-datetime-edit-year-field[disabled]{}
input::-webkit-datetime-edit-month-field[disabled]{}
input::-webkit-datetime-edit-week-field[disabled]{}
input::-webkit-datetime-edit-day-field[disabled]{}
input::-webkit-datetime-edit-ampm-field[disabled]{}
input::-webkit-datetime-edit-hour-field[disabled]{}
input::-webkit-datetime-edit-millisecond-field[disabled]{}
input::-webkit-datetime-edit-minute-field[disabled]{}
input::-webkit-datetime-edit-second-field[disabled]{}
input::-webkit-datetime-edit-text{}
input::-webkit-inner-spin-button{}
input::-webkit-calendar-picker-indicator{}
input::-webkit-calendar-picker-indicator:hover{}

若有不足请多多指教！希望给您带来帮助！

相关文章：

input时间表单默认样式修改（input[type=“date“]）

一、时间选择的种类: HTML代码&#xff1a; <input type"date" value"2018-11-15" />选择日期&#xff1a; 选择时间&#xff1a; <input type"time" value"22:52" />在这里插入图片描述 选择星期&#xff1a; <…...

编程日记 2023/8/30 17:07:44

首页搜索框传递参数，并在搜索页面中的搜索框中进行显示，搜索框绑定回车键进行搜索

实现搜索条件和搜索内容固定&#xff0c;以及回车键搜索跳转 1.写出搜索条件和搜索框 <form class"parent"><select id"searchSelect" style"border: 1px solid #325da7;border-right: none;" value"resource"><opt…...

编程日记 2023/8/30 17:06:43

【Vue3+Ts】项目启动准备和配置项目代码规范和css样式的重置

项目启动准备 创建项目&#xff08; 使用Vite 构建工具创建项目模板&#xff09;目录介绍插件安装创建别名编译说明项目配置配置icon和标题配置项目别名配置ts.config.json检测vscode的插件是否配置 配置项目代码规范集成editorconfig配置prettier工具库ESLint检测配置 CSS样式…...

编程日记 2023/8/30 17:05:42

Java【手撕双指针】LeetCode 15. “三数之和“, 图文详解思路分析 + 代码

文章目录 前言一、三数之和1, 题目2, 思路分析3, 代码 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, 链表, 堆…...

编程日记 2023/8/30 17:04:40

Flutter：自定义组件的上下左右弹出层

背景 最近要使用Flutter实现一个下拉菜单&#xff0c;需求就是&#xff0c;在当前组件下点击&#xff0c;其下方弹出一个菜单选项&#xff0c;如下图所示&#xff1a; 实现起来&#xff0c;貌似没什么障碍&#xff0c;在Flutter中本身就提供了弹出层PopupMenuButton组件和show…...

编程日记 2023/8/30 17:03:39

C++处理终端程序中断或意外退出的情况

目录 背景和需求解决方法关于信号类型 背景和需求 Linux环境中&#xff0c;有一个可执行程序&#xff0c;假设该程序的运行生命周期需要调用下面四个函数&#xff1a; int connect(); int start();int end(); int disconnect();如果用户在程序运行期间&#xff0c;手动CTRLC或…...

编程日记 2023/8/30 17:02:38

分布式锁：业务锁和定时任务锁

一&#xff1a;业务锁 在代码业务逻辑加锁&#xff0c;防止不同业务操作相同业务表导致数据错乱&#xff0c;设置锁进行等待。这里锁使用的是ReentrantLock。详细的介绍可以参考&#xff1a; https://blog.csdn.net/jerry11112/article/details/112375167 Slf4j public class…...

编程日记 2023/8/30 17:01:36

路由器的简单概述(详细理解+实例精讲)

系列文章目录 华为数通学习&#xff08;4&#xff09; 目录 系列文章目录 华为数通学习&#xff08;4&#xff09; 前言 一&#xff0c;网段间通信 二&#xff0c;路由器的基本特点 三&#xff0c;路由信息介绍 四&#xff0c;路由表 五&#xff0c;路由表的来源有哪些…...

编程日记 2023/8/30 17:00:34

Mapper.xml文件解析

Mapper.xml文件解析 简单解读 最近在做一个分布式项目&#xff0c;看到xml文件原先只是上网CV&#xff0c;还是要搞清楚吧&#xff01; 下面是一个Mybatis的SQL映射文件的配置 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC…...

编程日记 2023/8/30 16:59:33

ES 7.6 - JAVA应用基础操作篇

ES 7.6 - JAVA应用基础操作篇 环境准备依赖配置 实体类准备使用说明索引/映射操作创建索引和映射索引和映射相关查询删除索引 文档操作插入数据更新数据删除数据批量操作 文档查询根据ID查询根据字段精准查询根据字段分词查询控制返回字段范围查询组合查询排序分页高亮搜索聚合…...

编程日记 2023/8/30 16:58:32

com.squareup.okhttp3:okhttp 组件安全漏洞及健康度分析

组件简介 维护者square组织许可证类型Apache License 2.0首次发布2016 年 1 月 2 日最新发布时间2023 年 4 月 23 日GitHub Star44403GitHub Fork9197依赖包5,582依赖存储库77,217 com.squareup.okhttp3:okhttp 一个开源的 HTTP 客户端库&#xff0c;可以用于 Android 和 Jav…...

编程日记 2023/8/30 16:57:30

【Unity的HDRP渲染管线下用Steam VR串流结合使用遇到的各种问题_SteamVR 插件和Pico串流助手】

用Steam串流VR 背景：1.项目准备:相关文档和社区资源需要下载的工具2.梳理工程渲染设置和场景烘培正确:几个概念的一些说明：1. SteamVR：2. SteamVR插件：3. OpenVR和OpenXR：4. XRI：5. Pico串流助手：6. "Mock Runtime"选项含义SteamVR插件导入配置好SteamVR Came…...

编程日记 2023/8/30 16:56:29

Unity——音乐、音效

在游戏运行的过程中&#xff0c;音效的播放时机与游戏当前内容密切相关&#xff0c;而且随着场景的变化、剧情的推进&#xff0c;背景音乐也需要适时切换&#xff0c;所以恰当地控制音乐和音效的播放非常重要。音乐和音效的播放、停止、切换和音量变化等&#xff0c;都需要由脚…...

编程日记 2023/8/30 16:55:28

Ubuntu 23.10 将首次推出基于 Flutter 的新 Ubuntu 商店

导读Ubuntu 正在升级其软件商店以提供顺滑的体验&#xff01; 随着不断发展&#xff0c;Canonical 似乎全力以赴&#xff0c;将基于 Flutter 的元素整合到 Ubuntu 中。 在前段时间 Ubuntu 23.04 发布后&#xff0c;我们见到了基于 Flutter 的安装程序 &#xff0c;现在&#x…...

编程日记 2023/8/30 16:54:27

linux scatterlist阅读三

sg_copy_buffer 函数定义&#xff1a; /*** sg_copy_buffer - Copy data between a linear buffer and an SG list* sgl: The SG list* nents: Number of SG entries* buf: Where to copy from* buflen: The number of bytes to copy* skip: Number of bytes to sk…...

编程日记 2023/8/30 16:53:25

2023新，centos7安装mysql8.0.25

2023新&#xff0c;centos7安装mysql8.0.25 目录 2023新&#xff0c;centos7安装mysql8.0.251、下载rpm文件2、安装3、配置my.cnf4、启动查看重启服务5、登入mysql并修改密码6、修改可以远程登录 1、下载rpm文件 进入到你想要的文件地址下 wget https://repo.mysql.com//mysq…...

编程日记 2023/8/30 16:52:24

Data Rescue Professional for Mac：专业的数据恢复工具

在数字化时代&#xff0c;我们的生活和工作离不开电脑和存储设备。但是&#xff0c;意外情况时常发生&#xff0c;例如误删除文件、格式化硬盘、病毒攻击等&#xff0c;这些都可能导致重要的数据丢失。面对数据丢失&#xff0c;我们迫切需要一款可靠的数据恢复工具。今天&#…...

编程日记 2023/8/30 16:51:22

新手小白想要做好跨境电商独立站，需要考虑哪些要素？

对于不少中小卖家而言&#xff0c;利用独立站出海已然成为下一个跨境热潮。但是采用独立站模式做出海生意前&#xff0c;卖家需要考虑哪些要素&#xff1f; 产品选择 对于国内的卖家来说&#xff0c;依托于国内强大的供应链优势&#xff0c;只要能把握住消费者心态&#xff0…...

编程日记 2023/8/30 16:50:20

Consul原理介绍

官方文档&#xff1a;https://www.consul.io/docs Raft动画演示&#xff1a;http://thesecretlivesofdata.com/raft/ 注册中心对比 Consul特点 服务发现、健康检查、Key/Value存储、安全服务通信&#xff08;TLS证书&#xff09;、多数据中心 架构 角色 数据中心 数据中心内…...

编程日记 2023/8/30 16:49:19

【C++实战】C++实现贪吃蛇（含源代码）—基于easyx图形库

食用指南&#xff1a;本文在有C基础的情况下食用更佳 &#x1f340;本文前置知识&#xff1a;C基础 ♈️今日夜电波&#xff1a;toge—あよ 0:36 ━━━━━━️&#x1f49f;──────── 4:03 &a…...

编程日记 2023/8/30 16:48:18

Belkin向范围3排放碳中和目标迈进

该公司发布的《2025年环境影响报告》重点介绍了其在减排、循环设计和负责任包装方面取得的持续进展 发布了《2025年环境影响报告》&#xff08;2025 Impact Report&#xff09;&#xff0c;重点介绍了关键成就&#xff0c;并重申了其对企业社会责任的承诺。在2025年实现范围1和…...

编程新知 2026/5/22 0:26:24

CANN/asc-devkit算子动态库配置

KernelSo 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode.com/c…...

编程新知 2026/5/21 23:40:59

BetterCodable高级用法：自定义策略和属性包装器的深度解析

BetterCodable高级用法&#xff1a;自定义策略和属性包装器的深度解析 【免费下载链接】BetterCodable Better Codable through Property Wrappers 项目地址: https://gitcode.com/gh_mirrors/be/BetterCodable BetterCodable是一个通过属性包装器(Property Wrapper)增强…...

编程新知 2026/5/21 23:22:40

【软考高级架构】案例题考前突击——构建可观测与弹性服务架构的实践设计

案例分析题：构建可观测与弹性服务架构的实践设计 案例背景 某金融科技公司搭建了基于Spring Cloud 的微服务系统，用于支撑其多租户 SaaS 金融平台，核心功能包括用户管理、交易撮合、支付结算、风控审计等模块。由于业务快速扩张、团队并行开发，系统逐渐暴露出如下痛点： …...

编程新知 2026/5/21 22:24:32

泛微发布300+可落地AI应用 让组织业务数智升级

5月20日&#xff0c;泛微300AI应用场景体验大会在上海举办。大会以“组织的AI范式数字员工与业务流程AI新生”为主题&#xff0c; 展示泛微全场景AI应用。泛微搭载五大智能引擎&#xff0c;提供300可快速落地的AI应用场景&#xff0c;覆盖市场、销售、项目、合同、采购、财务、…...

编程新知 2026/5/21 20:58:36

终极QRazyBox指南：免费在线修复损坏二维码的完整教程

终极QRazyBox指南&#xff1a;免费在线修复损坏二维码的完整教程 【免费下载链接】qrazybox QR Code Analysis and Recovery Toolkit 项目地址: https://gitcode.com/gh_mirrors/qr/qrazybox 你是否遇到过重要二维码因为打印模糊、水渍污损或物理磨损而无法扫描的困扰&a…...

编程新知 2026/5/21 19:44:27

5秒极速转换！m4s转换工具：B站缓存视频合并为MP4的完整指南

5秒极速转换&#xff01;m4s转换工具&#xff1a;B站缓存视频合并为MP4的完整指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否在B站缓…...

编程新知 2026/5/21 19:27:28

用C#手搓ABB IRB 2600机器人正逆运动学（附完整代码与避坑指南）

从零实现ABB IRB 2600机器人运动学&#xff1a;C#实战与工业级代码优化 在工业机器人编程领域&#xff0c;能够将教科书上的数学公式转化为可靠的生产线代码是一项核心技能。ABB IRB 2600作为经典的六轴工业机器人&#xff0c;其运动学实现过程中存在诸多教科书不会提及的工程细…...

编程新知 2026/5/21 18:30:28

硬件工程师效率翻倍：我是如何让Cadence OrCAD导出的PDF自动生成清晰书签目录的

硬件工程师效率革命&#xff1a;用OrCAD打造智能PDF文档工作流 在硬件设计领域&#xff0c;一份结构清晰的原理图PDF文档往往能大幅提升团队协作效率。想象一下这样的场景&#xff1a;当你将精心设计的电路方案交付给客户或跨部门同事时&#xff0c;对方打开的是一个带有智能书…...

编程新知 2026/5/21 17:52:18

【深度解析】Antigravity 2.0：从 AI IDE 到 Agent 编排层，Google 开发者工具栈的技术转向

摘要 Google Antigravity 2.0 不再只是一个 AI IDE&#xff0c;而是围绕桌面端、CLI、SDK 与统一 Agent Harness 构建的新一代智能开发工具栈。本文从架构、模型能力、开发流程与工程落地角度解析其技术价值&#xff0c;并给出可复用的 AI Agent API 调用示例。背景介绍&#x…...

编程新知 2026/5/21 16:48:44