浏览器的私有属性

Posted 2023-05-07

参考技术A 2.input[type=checkbox] / input[type=radio]

3.input[type=color]

4.input[type=date]

5.input[type=file]

6.input[type=number]

7.input[type=password]

8.input[type=range]

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]

10.<button>元素

11.<keygen>元素

12.<meter>元素
<meter>用做测量、评分等。Webkit下有如下伪元素可控：

::-webkit-meter-bar – 条条
::-webkit-meter-optimum-value – 得分好的时候那部分区域
::-webkit-meter-suboptimal-value – 分数凑合时候
::-webkit-meter-even-less-good-value – 分数糟糕时候区域状态

13.<progress>元素

14.<select>元素

15.<textarea>元素::-webkit-resizer可以改变右下角的拉伸小标记的样式。

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/

0071 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1. 私有前缀
   ? -moz-：代表 firefox 浏览器私有属性
   ? -ms-：代表 ie 浏览器私有属性
   ? -webkit-：代表 safari、chrome 私有属性
   ? -o-：代表 Opera 私有属性

2. 提倡的写法
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;