::-moz代表firefox浏览器私有属性
::-ms代表ie浏览器私有属性
::-webkit代表safari、chrome私有属性
::-o代表opera
1.清除input[type=”number”]侧边的箭头
input::-webkit-inner-spin-button { -webkit-appearance: none; }
2.input[type=checkbox] / input[type=radio]
::-ms-check {
color: #34538b;
background: #a0b3d6;
padding: .5em;
}
<input type="radio" />
<input type="checkbox" />
3.input[type=color]
::-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; }
<input type="color">
4.input[type=date]
::-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 – 控制年文字, 如2013四个字母占据的那片地方
::-webkit-inner-spin-button – 这是控制上下小箭头的
::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
5.input[type=file]
//IE10+浏览器使用的是::-ms-browse伪元素，可以改变按钮模样部分的边框、背景色、高度啊
::-ms-browse {
padding: .4em;
line-height: 24px; /* 光标垂直居中 */
border: 1px solid #a0b3d6;
background: #f0f3f9;
color: #34538b;
}
//Chrome用法与之大相径庭，
//伪元素为::-webkit-file-upload-button，类似效果CSS如下：
::-webkit-file-upload-button {
padding: .4em;
line-height: 30px;
border: 1px solid #a0b3d6;
background: #f0f3f9;
color: #34538b;
}
6.input[type=number]
* `::-webkit-textfield-decoration-container` – input内部、上下箭头以及填写数值的外部容器
* `::-webkit-inner-spin-button` – 就是Chrome下上上下下的小小按钮
* `::-webkit-outer-spin-button` – 测到浏览器起火都不知是干嘛的~
7.input[type=password]
//Chrome
:-ms-input-placeholder {
color: mediumvioletred;
text-indent: 5px;
}
//FireFox
::-moz-placeholder {
color: mediumvioletred;
text-indent: 5px; /* 没有用 */
opacity: 1!important;
}
8.input[type=range]
///IE浏览器伪元素相对复杂些：
::-ms-fill-lower: 已经拖拽的区域
::-ms-fill-upper: 还没有拖拽的区域
::-ms-ticks-before: 前面/上面的刻度线
::-ms-ticks-after: 后面、下面的刻度线
::-ms-thumb: 中间拖动的块块
::-ms-track: 拖动轨道
::ms-tooltip: 拖动时候显示的文字什么的。注意，这个元素只能用display:none等隐藏样式。
//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，见截图特意标示 */
//谷歌
::-webkit-slider-runnable-track {
border: 1px solid #a0b3d6;
background: #f0f3f9;
}
::-webkit-slider-thumb {
outline: 1px dotted #a0b3d6;
background-color: #34538b;
}
//火狐
::-moz-range-track {
border: 1px solid #a0b3d6;
height: 20px;
background: #f0f3f9;
}
::-moz-range-thumb {
background: #34538b;
height: 30px;
}
9.input[type=search]
/* 去除圆角 /
input[type=search] { -webkit-appearance: none; }
/ 隐藏取消按钮 /
::-webkit-search-cancel-button { -webkit-appearance: none; }
/ 隐藏放大镜 */
::-webkit-search-results-button { -webkit-appearance: none; }
10.input[type=text]
::-ms-value, 可以更改文本框(如type=text, type=password等)以及下拉框(select)的样式。
::-ms-value {
padding: 4px;
color: #34538b;
border: 1px solid #a0b3d6;
background-color: #f0f3f9;
}
::-ms-clear { display: none; }//可以改变或者隐藏IE10+浏览器文本框末尾的关闭小叉叉
10.<button>元素
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 5px solid #34538b;
}
button::-moz-focus-outer,
input::-moz-focus-outer {
border: 5px solid #cad5eb;
}
11.<keygen>元素
::-webkit-keygen-select {
border: 1px solid #a0b3d6;
background-color: #f0f3f9;
color: #34538b;
}
12.<meter>元素
<meter>用做测量、评分等。Webkit下有如下伪元素可控：
::-webkit-meter-bar – 条条
::-webkit-meter-optimum-value – 得分好的时候那部分区域
::-webkit-meter-suboptimal-value – 分数凑合时候
::-webkit-meter-even-less-good-value – 分数糟糕时候区域状态
<meter low="69" high="80" max="100" optimum="100" value="92">优</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">良</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">差</meter>
.deal meter { -webkit-appearance: none; }
.::-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: blue; } /* 糟糕 */
//火狐
::-moz-meter-bar {
background: rgba(0,96,0,.6);
}
13.<progress>元素
::-ms-fill { background: #34538b; }//ie
//谷歌
progress { -webkit-appearance: none; }
::-webkit-progress-inner-element { }
::-webkit-progress-bar { border: 1px solid black; }
::-webkit-progress-value { background: #34538b; }
::-moz-progress-bar { background: #34538b; }//火狐
14.<select>元素
::-ms-expand {//ie
padding: .5em;
color: #34538b;
border: 1px solid #a0b3d6;
background: #f0f3f9;
}
-moz-appearance:none//firfox
-webkit-appearance:none/*for chrome*/
15.<textarea>元素::-webkit-resizer可以改变右下角的拉伸小标记的样式。
::-webkit-resizer {
display: none;
}
::-webkit-resizer {
background: url(/study/image/selection.gif);
outline: 1px dotted #000;
}
16.表单验证信息
仅Webkit内核浏览器目前鸟之，改变验证提示时候bubble框的UI, 伪元素如下：
::-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块区域
此处参考文章地址：https://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/
网友评论