自我扩展的知识 修改input的date的默认样式、修改鼠标样式、appearance 属性

本文主要是介绍自我扩展的知识 修改input的date的默认样式、修改鼠标样式、appearance 属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、修改input 中的data样式

目前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类型改变行高和高度那个小三角并不会根据大小调整,实在太丑了,所以决定把它隐藏掉。
下面的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 .3em; }

控制年文字, 如2017四个字母占据的那片
::-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;
}

2、修改鼠标的样式

<div style="cursor: pointer;">手形</div>
<div style="cursor: move;">移动</div>
<div style="cursor: progress;">正在执行</div>
<div style="cursor: crosshair;">十字形</div>
<div style="cursor: text;">文本编辑I</div>
<div style="cursor: help;">帮助</div>
<div style="cursor: wait;">等待</div>
<div style="cursor: inherit;">继承父元素样式</div>
<div style="cursor: auto;">自动(遇到文本变I,遇到链接变手形,遇到可扩展边缘变向各方向拉伸形状……)</div>
<div style="cursor: default;">默认(箭头)</div>
<div style="cursor: e-resize;">向右变形(东east)</div>
<div style="cursor: ne-resize;">向右上变形</div>
<div style="cursor: nw-resize;">向左上变形</div>
<div style="cursor: n-resize;">向上变形(北north)</div>
<div style="cursor: se-resize;">向右下变形</div>
<div style="cursor: sw-resize;">向左下变形</div>
<div style="cursor: s-resize;">向下变形(南south)</div>
<div style="cursor: w-resize;">向左变形(西western)</div>

3、CSS3 appearance 属性

浏览器支持

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

实例

使 div 元素看上去像一个按钮:

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4iSWOzbY-1607090320773)(C:\Users\Administrator\Desktop\images\appearance 属性.jpg)]

定义和用法

appearance 属性允许您使元素看上去像标准的用户界面元素。

默认值:normal
继承性:no
版本:CSS3
JavaScript 语法:object.style.appearance=“button”

语法

appearance: normal|icon|window|button|menu|field;
描述
normal将元素呈现为常规元素。
icon将元素呈现为图标(小图片)。
window将元素呈现为视口。
button将元素呈现为按钮。
menu将元素呈现为一套供用户选择的选项。
)。
window将元素呈现为视口。
button将元素呈现为按钮。
menu将元素呈现为一套供用户选择的选项。
field将元素呈现为输入字段。

这篇关于自我扩展的知识 修改input的date的默认样式、修改鼠标样式、appearance 属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/934007

相关文章

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》:本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2