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

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

news 2026/3/28 0:46:11

一、时间选择的种类:

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

K230 vs树莓派视觉套件：300元预算该选谁？实测对比工业检测场景

K230与树莓派视觉套件&#xff1a;300元预算下的工业检测实战对比 在工业自动化浪潮中&#xff0c;视觉检测系统正从大型企业向中小型制造车间快速渗透。当预算被严格限制在300元区间时&#xff0c;K230开发板与树莓派摄像头组合成为最受关注的两种解决方案。我们历时三个月在6…...

编程新知 2026/3/27 23:46:49

打破数据标注瓶颈：Label Studio如何让AI训练效率提升300%？

打破数据标注瓶颈&#xff1a;Label Studio如何让AI训练效率提升300%&#xff1f; 【免费下载链接】label-studio Label Studio is a multi-type data labeling and annotation tool with standardized output format 项目地址: https://gitcode.com/GitHub_Trending/la/labe…...

编程新知 2026/3/27 23:26:39

CentOS7下SSD性能调优实战：iostat与dd命令的黄金组合

CentOS7下SSD性能调优实战&#xff1a;iostat与dd命令的黄金组合 在当今数据驱动的时代&#xff0c;存储性能往往成为系统瓶颈的关键所在。对于使用CentOS7系统的运维工程师来说&#xff0c;如何充分释放SSD硬件的性能潜力&#xff0c;是一个既具挑战性又充满成就感的技术课题。…...

编程新知 2026/3/27 23:14:37

SDMatte Web服务灰度发布：新模型版本AB测试与用户反馈闭环机制

SDMatte Web服务灰度发布&#xff1a;新模型版本AB测试与用户反馈闭环机制 1. 引言 在AI图像处理领域&#xff0c;模型迭代更新是持续提升服务质量的必经之路。SDMatte作为一款专注于高质量图像抠图的AI模型&#xff0c;近期完成了新版本SDMatte的研发工作。本文将详细介绍我…...

编程新知 2026/3/27 22:00:02

别再死记硬背了！用Python和SymPy库5分钟可视化理解泰勒公式的逼近过程

用Python动态可视化泰勒公式&#xff1a;5行代码理解多项式逼近本质 数学公式的抽象性常常成为学习者的障碍&#xff0c;尤其是泰勒公式这种涉及无限逼近概念的内容。传统的静态图示和理论推导虽然严谨&#xff0c;却难以直观展示"以直代曲"的动态过程。本文将用Pyth…...

编程新知 2026/3/27 21:58:02

告别盲目搜索！Unity大版本升级时，系统化处理API变更的5个步骤

Unity大版本升级的系统化实践&#xff1a;从API变更管理到团队协作优化 当Unity 2023 LTS发布时&#xff0c;某中型游戏团队在升级过程中发现超过40%的脚本因API变更而报错&#xff0c;导致项目停滞两周。这种场景在技术迭代中并不罕见&#xff0c;但大多数团队仍采用"遇到…...

编程新知 2026/3/27 21:54:01

Deepfake Offensive Toolkit Docker部署：跨平台解决方案详解

Deepfake Offensive Toolkit Docker部署&#xff1a;跨平台解决方案详解 【免费下载链接】dot The Deepfake Offensive Toolkit 项目地址: https://gitcode.com/gh_mirrors/dot/dot Deepfake Offensive Toolkit&#xff08;简称dot&#xff09;是一款功能强大的深度学习…...

编程新知 2026/3/27 21:31:55

SEO_10个提升网站排名的实用SEO技巧分享（220 ）

<h1 id"seo10seo">SEO:10个提升网站排名的实用SEO技巧分享</h1> <p>在当今互联网时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为提升网站流量和吸引潜在客户的关键手段。百度作为中国最大的搜索引擎&#xff0c;其优化规则对整…...

编程新知 2026/3/27 20:19:09

海康MVS相机+Halcon标定实战：18张图搞定畸变矫正（附标定板选购指南）

海康MVS相机Halcon标定实战&#xff1a;18张图搞定畸变矫正与标定板选购指南 工业视觉系统的精度往往取决于相机标定的准确性。在实际项目中&#xff0c;我们常遇到这样的困境&#xff1a;明明按照教程步骤操作&#xff0c;标定结果却总是不尽如人意。本文将分享一套经过实战验…...

编程新知 2026/3/27 20:17:08

深入解析：高级 Android 开发工程师职位与面试全攻略

引言：移动互联网时代的核心力量 在当今移动互联网蓬勃发展的时代，智能手机已成为人们日常生活中不可或缺的一部分。作为连接用户与数字服务的桥梁，移动应用扮演着至关重要的角色。而在移动应用的生态中，Android 系统凭借其开放性和庞大的用户基础，占据了全球移动操作系统…...

编程新知 2026/3/27 19:24:53