兼容性
1 .好多都是仅仅支持某一些内核的浏览器，这里只看chrome才行的吧，不行的就是仅仅记录下，知道有这个东西吧
button,reset,submit类型(Gecko内核浏览器才行)
1 .::-moz-focus-outer
2 .::-moz-focus-inner
keygen
1 .<keygen> 标签规定用于表单的密钥对生成器字段。
2 .当提交表单时，私匙存储在本地，公钥发送到服务器
3 .这个没有必要显示出来吧
::-webkit-keygen-select {
border: 1px solid #a0b3d6;
background-color: #f0f3f9;
color: #34538b;
}
image.png
meter元素
1 .用来做测量，评分，比如密码强度
::-webkit-meter-bar {
height: 1em;
background: white;
border: 1px solid black;
}
::-webkit-meter-optimum-value { background: green; } /* 好 */
::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */
::-webkit-meter-even-less-good-value { background: hsl(0, 100%, 50%); } /* 糟糕 */
chrome下默认样式也不是很差啊
progress元素
1 .进度条
::-webkit-progress-inner-element – progress内元素
::-webkit-progress-bar – 背景进度条
::-webkit-progress-value – 完成进度条
chrome里面可以看到，整个元素的全部css其实都是分为几大类
apperance里面的属性难道全部都可以操作设置么
2 .上面这些属性，在样式那里虽然设置了，但是都kanbudao
张鑫旭的博客说这些在一个shadow里面，我这怎么找不到呢
//不过这个shadow DOM有自己编写组件那味了，应该就是这么写的
2 .
select元素
1 .IE10，可以改变下拉框元素的下拉按钮样式
2 .所以我们编写组件要做的是，首先完全复原原来自带的功能，兼容性，最后才是自己需要的新功能
3 .
textarea
1 .可以改变右下角的拉升小标记的样式
2 .但是吧，这里一般追求的是随着输入文字的情况自动增加高度，而不是手动拖拽
::-webkit-resizer{
/* display: none; */
background:red;
outline: 1px solid yellowgreen;
/* 这里还可以加任意的图片，比如一个gif */
}
/* 先让默认的消失 */
checkbox.radio
1 .基本无解，还是伪类操作
2 .IE上面
::-ms-check {
color: #34538b;
background: #a0b3d6;
padding: .5em;
}
//这里也没用啊，不能设置非check来和他配和，仅仅check很奇怪，不能配套
3 .有点拉，说实话
color
1 .::-webkit-color-swatch-wrapper:左边的div
2 .::-webkit-color-swatch.右边选完颜色的div
::-webkit-color-swatch-wrapper {
border: 1px solid #777;
background-image: -webkit-gradient(linear, 0 0, 100% 0,
from(red),
color-stop(15%, orange),
color-stop(30%, yellow),
color-stop(50%, green),
color-stop(65%, darkcyan),
color-stop(80%, blue),
to(purple));
}
::-webkit-color-swatch { height:21px; position:relative; left: 40px; top:-5px; }
image.png
3 .一般情况，HTML5中表单的控件效果都是通过浏览器的Shadow Dom创建的,脱离文档主树，不受大环境css影响，要控制其UI只能使用浏览器开发的伪api接口。那为啥全部的都给我开放呢。这里又是另一种实现的方法
4 .
date
关键又来了，这些shadow要怎么看
齿轮打开show shadow就可以看到
1 .关键1，可以自己找id名字然后改变了，不必需要查看api了
2 .关键2，更加看到了背后的原理
3 .关键3，学习了一波官方的dom结构，多了好多属性
4 .关键4，还是找不到点开的日期的dom结构，这个不知道藏在了哪里
image.png
image.png
1 .所以可以看到可以修改的地方
::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); }
::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
::-webkit-datetime-edit-text { color: #4D90FE; padding: 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;
}
5 .::-webkit-inner-spin-button { visibility: hidden; }去除设计师讨厌的上下小箭头
6 .清除X的方法
::-webkit-clear-button {
-webkit-appearance: none;
}
file
image.png
1 .现在可以看到两个东西了，一个是css的全部样式，一个是shadow dom的全部样式
2 .IE下 ,可以改变按钮模样部分的边框,背景色，高度之类的。
::-ms-browse{
padding:.4em;
line-height:24px;
border:1px solid #eee;
color:red;
}
3 .chrome:这个是可以看shadow-dom上面的id直接确定的
::-webkit-file-upload-button {
padding: .4em;
line-height: 30px;
border: 1px solid #a0b3d6;
background: #f0f3f9;
color: #34538b;
}
4 .老实说，chrome上面这个应该算是好的了
number
image.png
1 .原来webkit这种伪类是这么用的.这样感觉都不用背了，这简直是秃子头上的虱子，就是原型填空，简单的一匹，直接把他当成是div操作就完事了.舒服，如果别的浏览器也是这样就好了
2 .常用
::-webkit-inner-spin-button {
-webkit-appearance: none; /* 上下小箭头按钮，你丫太丑了，滚粗，负分 */
}
password
image.png
1 .这个感觉有点拉，可以看出在chrome里面是没有任何可以操作的味蕾的
placeholder
image.png
range
range的shadow结构
1 .chrome看起来这个也有点拉，只有两个属性
::-webkit-slider-runnable-track {
border: 1px solid #a0b3d6;
background: #f0f3f9;
}
::-webkit-slider-thumb {
outline: 1px dotted #a0b3d6;
background-color: #34538b;
}
//已经这俩元素hover上去的时候的属性
::-webkit-slider-runnable-track:hover
::-webkit-slider-thumb:hover
2 .ie下面
::-ms-fill-lower { background: orange; }
//已经拖拽的区域
::-ms-fill-upper { background: green; }
//还没有拖拽的区域
::-ms-thumb { background: red; }
//中间拖动的托块
::-ms-ticks-before { display: block; color: black; }
//前面的刻线
::-ms-ticks-after { display: block; color: blue; }
//后面的刻线
::-ms-track { padding: 5px; }
//拖的轨道
::-ms-tooltip { display: none; /* 数值提示 只能是display或visibility，见截图特意标示 */
//拖的时候显示的提示。优秀啊
image.png
3 .这里还要看加了各种属性之后dom结构是否有新的变化
search
image.png
1 .这样看shadow里面也是感觉毫无可读性，seo他这个不也是一堆div么，难道就是这样特意优化么
2 .chrome
1 .::-webkit-search-cancel-button:输入文字之后出现的XX
2 .::-webkit-search-results-button:控制放大镜.一般都是直接干掉
/* 去除圆角 */
input[type=search] { -webkit-appearance: none; }
/* 隐藏取消按钮 */
::-webkit-search-cancel-button { -webkit-appearance: none; }
/* 隐藏放大镜 */
::-webkit-search-results-button { -webkit-appearance: none; }
//看来这些接口流出来的最大目的就是让别人干掉了
最后
1 .vscode输入这里还有补全。有时间在研究下
image.png
2 .比如这些:改变提交验证
::-webkit-validation-bubble – 整个弹出框区域
::-webkit-validation-bubble-arrow – 弹出框的尖角
::-webkit-validation-bubble-arrow-clipper - 弹出框尖角所在块状区域
::-webkit-validation-bubble-heading – 文字标题占据区域
::-webkit-validation-bubble-message – 文字提示的整个方形的信息框
::-webkit-validation-bubble-text-block – 文字所在block块区域
3 .https://www.zhangxinxu.com/study/201306/pseudo-elements-to-style-form-validation.html
网友评论