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

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

news 2025/12/21 11:35:10

一、时间选择的种类:

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/21 1:01:03

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/19 21:20:42

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2025/12/21 2:56:32

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2025/12/14 23:22:00

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2025/12/19 20:11:11

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

编程新知 2025/12/17 22:57:13