修改常见的原生表单控件的默认样式

介绍

HTML 原生的表单控件样式在各个浏览器上面由用户代理默认设置样式，如果在页面上应用了其他颜色或主题时，我们通常也相应的更改这些输入框或按钮的颜色或背景，否则会出现颜色与背景或主题不融入的样式不一致问题。

一般而言，HTML 中表单控件的效果都是通过浏览器的 Shadow Dom 创建的，脱离文档主树，不受大环境 CSS 影响，要控制其 UI 只能使用浏览器开发的伪元素 API 接口。并且，只有部分的样式可以重置。而其余的默认样式我们是无法使用浏览器自带的开发工具查看到的，因为其并不属于文档树，只是背后的一棵子树。

针对特定表单控件，浏览器提供了特定的伪元素用来改变样式。

input[type=search]

有如下 2 个伪元素可以改变搜索控件的 UI：

• ::-webkit-search-cancel-button - 搜索框右边的清除按钮，用来清除输入内容，在有内容时才显示。
• ::-webkit-search-results-button - 搜索框左边的菜单按钮，用来显示历史记录，现在浏览器已经不显示了。

input[type=number]

有如下 2 个伪元素可以改变数字控件的 UI：

• ::-webkit-textfield-decoration-container – 填写数值的外部容器。
• ::-webk