html如何改变日期样式,html如何修改日期样式
在html中,可以使用“::-webkit-datetime-edit”伪元素选择器来修改日期格式,只需要用该选择器选中元素,在设置具体样式即可,具体语法为“::-webkit-datetime-edit{属性:属性值}”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
时间选择的种类:
选择日期:
选择时间:
选择星期:
选择月份:
对日期时间控件的样式进行修改
目前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 –这是控制清除按钮的
以下的囊括了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{}
date类型改变行高和高度那个小三角并不会根据大小调整,实在太丑了,所以决定把它隐藏掉。
下面的css可以去掉date中上下小三角,但是保留input类型为number的小三角。
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
input类型为date的输入框有以下属性,可以根据自己的需求自行调整。::-webkit-datetime-edit {
padding: 1px;
background: url(../selection.gif);
}
::-webkit-datetime-edit-fields-wrapper {
background-color: #eee;
}
::-webkit-datetime-edit-text {
color: #4d90fe;
padding: 0 0.3em;
}
::-webkit-datetime-edit-year-field {
color: purple;
}
::-webkit-datetime-edit-month-field {
color: blue;
}
::-webkit-datetime-edit-day-field {
color: green;
}
::-webkit-inner-spin-button {
visibility: hidden;
}
::-webkit-calendar-picker-indicator {
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: inset 0 1px #fff, 0 1px #eee;
background-color: #eee;
background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
color: #666;
}
推荐学习:html视频教程
html如何改变日期样式,html如何修改日期样式相关推荐
- element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
- vue 方法里面修改样式_vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. .swiper-contain ...
- 微信小程序wxss---对应css样式(动态修改css样式)
微信中wxss有些类似于scss,可以引用外联样式.但是不知道怎么继承css样式 下图是微信中动态绑定css样式,实现css样式的动态修改
- 计算机 无法更改时间格式,如何修改电脑日期格式_如何修改日期格式
2016-12-06 08:03:47 方法一: 1.适合windows xp系统 鼠标右击电脑任务栏/选择"属性"/选择"任务栏"选项卡/在"通知区 ...
- 在Linux中如何查看文件的修改日期
有时候可能需要检查有关文件的详细信息,例如文件的修改日期.当你要检查文件的最后编辑时间时,本文可能会派上用场.在本文将学习4种方法查看文件的修改日期. 使用stat stat 可以显示文件属性的详细信 ...
- 如何修改excel的修改日期?
如何修改excel的修改日期?文件的修改日期也就是我们常说的修改时间,就是文件最后一次修改完成后保存的时间,精确到秒,打开一个文件的属性后可以查看到文件的修改时间.excel是电脑上比较常用的文件,用 ...
- 修改css样式后刷新网页无改变
在调整页面样式时候,css改变,而页面未发生变化 1.ctrl+f5lai1更新页面 2.Ctrl+F5依然失败 绝大多情况下跟每个浏览器自身的缓存机制有关.而且大部分这个情况是单页面项目,这个时候按 ...
- sql修改日期不改变时间
sql service修改日期不改变时间 整个表的时间修改 update CAR_REPLY set sdate = '时间'+substring(convert(char(20),sdate,120 ...
- elementui时间选择器样式修改默认样式---修改宽度---修改日期图标
原先的代码 <el-form-item label="时间选择"><el-date-pickerv-model="time" //绑定的数据, ...
- android 系统时间改变颜色吗,安卓手机通知栏时间、日期、通知颜色修改教程
智能手机使用久了,难免产生视觉疲劳,很多朋友通过不断更新桌面或者刷机来达到不同的视觉效果,不过以上方法通常比较复杂,并且使用次数多了也容易失去新鲜感,下面本文也是涉及到手机界面美化方面,主要介绍下An ...
最新文章
- Transformer 代码完全解读!
- (转)access和SQL语句的区别
- Android显示系统之View与SurfaceView更新屏幕的区别
- 异常:System.BadImageFormatException,未能加载正确的程序集XXX或其某一依赖项
- 标记页面区分渠道php,PM必懂的前端知识
- gpio_request 原形代码
- c语言计算文件摘要值,c语言文件操作摘要.ppt
- jqGrid 常用方法
- B75经典门户商业版discuz模板
- Python演示--UDP套接字真的无连接吗?
- python restful api_用Python语言写一个restful API
- TensorRT C++ API用法
- 如何让 Mac 加入网络帐户服务器?
- pandas cut qcut 分箱算法详解
- JS实现数据库连接并查询
- 台式计算机c盘怎么清理空间,练习教你电脑如何清理系统c盘空间
- 山西机电职业技术学院计算机专业,山西机电职业技术学院怎么样?山西机电职业技术学院好吗?(历年分数、专业设置、校园环境、教学实力、名人校友) - 职友集...
- java将mp4转换成m3u8
- 在哪里写博客比较好?不同写作平台的横向对比
- Onedrive不限速还有5T空间,且行且珍惜
热门文章
- python学习笔记(1) - python操作mysql数据库【持续更新中...】
- k近邻算法_机器学习 第38集:k近邻算法k值过小和过大有什么危害?k值如何选取?( 含有笔记、代码、注释 )...
- 科学计算机怎么用10次方,计算器里10次方怎么按
- linux设备驱动之 i2c设备驱动 at24c08驱动程序分析
- matlab 语法_MATLAB中的语法
- mysql 查看环境变量_MySQL的环境变量
- MySQL 安装及配置 Navicat 工具
- IO设备错误,无法运行此项请求,要怎样寻回数据
- 可信任的人工智能(一)
- 微信小程序——调查问卷案例