> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/css-xi-lie/09-zi-ding-yi-biao-dan-wei-yuan-su-yang-shi.md).

# 自定义表单伪元素样式

当开发web应用程序时，表单样式是由客户端浏览器控制的，不同浏览器最终显示出来的样式各有差异，而且表单样式的美观度也达不到我们的预期。

现在，web 开发人可以通过伪元素给 web 渲染引擎添加钩子，控制表单的显示。然而，所有这些伪元素都是依赖于特定浏览器引擎的 （**所以要带有浏览器引擎前缀**），这样方便区分特定的浏览器引擎。

## 浏览器的内核

现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款，分别是**IE、Firefox、Google Chrome、Safari、Opera**。

浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

### JS引擎

JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。主流的 JavaScript 引擎有：

* V8
* SpiderMonkey
* JavaScriptCore
* Chakra

### 渲染引擎

浏览器内核又叫渲染引擎，主要负责 HTML、CSS 的解析，页面布局、渲染与复合层合成。浏览器内核的不同带来的主要问题是对 CSS 的支持度与属性表现差异。

* Trident内核：代表作品是IE，又称为 IE 内核或 MSHTML，此内核只能用于 Windows 平台，且不是开源的。
* Gecko内核：代表作品是 Firefox，常被称为 firefox 内核。它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主 要操作系统中使用。
* Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。
* Presto内核：（已弃用），代表作品是Opera。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto。
* Blink内核：由 Google 和 Opera Software 开发的浏览器排版引擎，2013年4月发布。

### 浏览器内核与 JS 引擎

| 浏览器/RunTime |                    内核（渲染引擎）                   |      JavaScript 引擎     |
| :---------: | :-------------------------------------------: | :--------------------: |
|    Chrome   | Blink（28\~） Webkit（Chrome 27），Chromium （2008） |           V8           |
|   FireFox   |                     Gecko                     |      SpiderMonkey      |
|    Safari   |                     Webkit                    |     JavaScriptCore     |
|     Edge    |                    EdgeHTML                   | Chakra(for JavaScript) |
|      IE     |                    Trident                    |   Chakra(for JScript)  |
|  PhantomJS  |                     Webkit                    |     JavaScriptCore     |
|   Node.js   |                       -                       |           V8           |

### 各浏览器前缀

* `-webkit-` ：WebKit 内核。如：谷歌、 Safari、 新版Opera浏览器 以及几乎所有 iOS 系统中的浏览器（包括iOS 系统中的火狐浏览器）
* `-moz-` ：Gecko 内核。如：火狐浏览器
* `-o-` ：Presto 内核。如：旧版Opera浏览器
* `-ms-` ：Trident 内核。IE浏览器 和 Edge浏览器

## 表单元素的伪元素

以下内容原文来源于[伪元素控制表单样式](https://www.w3cplus.com/css3/list-of-pseudo-elements-to-style-form-controls.html)，并参考了 [伪元素表单控件默认样式重置与自定义大全](https://www.zhangxinxu.com/wordpress/2013/06/伪元素-表单样式-pseudo-elements-style-form-controls/)，本人主要是对其中内容写了一些DEMO。另外，有一些个人的看法：

* 各浏览器对伪元素的支持情况不一，目前为止（2020.08），使用需要谨慎。
* 在chrome中，可以开启 shadow DOM，查看一些不在文档树的结构以及元素支持的伪元素。

  **开启Shadow Dom：chrome开发者工具 -> 右上角三个竖排点 -> setting -> perferences -> elements -> show user agent shadow DOM。**
* 现有浏览器可能已经有更多支持的伪元素，具体可通过 shadow DOM元素查看。
* 比较重要的一个属性 `appearance`，可以隐藏一些元素原生的一个样式。如：input、select。

一般而言，HTML5中表单的控件效果都是通过浏览器的 Shadow Dom 创建的，脱离文档主树，不受大环境 CSS 影响，要控制其 UI 只能使用浏览器开发的伪元素API接口。记住，只有部分的样式可以重置。

### 1. input\[type=button]、input\[type=reset]、input\[type=submit]、button

**Gecko：** input 类型是 button，reset, 和 submit，还有 button 元素，有两个伪元素设置样式：

* `::-moz-focus-outer`
* `::-moz-focus-inner`

也许你用这些伪元素不能做很多事情，但是有一点重要的事情是，火狐可以应用他们添加border和padding。

```html
<style>
    .box_11 button::-moz-focus-inner,
    .box_11 input::-moz-focus-inner {
        border: 1px dotted transparent;
        padding: 0 2px;
    }
</style>

<section class="box_11">
    <div>
        <button>button</button>
        <input type="reset" value="reset">
        <input type="submit">
        <input type="file">
        <input type="button" value="button">
    </div>
    <div class="element_item11">
        <button>button</button>
        <input type="reset" value="reset">
        <input type="submit">
        <input type="file">
        <input type="button" value="button">
    </div>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=11)

### 2. input\[type=checkbox] / input\[type=radio]

\*\*Trident：\*\*IE浏览器引擎提供::-ms-check伪元素，来控制单选复选框的样式。

![image-20200816163404351](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816163404351.png)

```html
<style>
    .item_01 ::-ms-check {
        color: #0aa;
        background: #f2f2f2;
        padding: 10px;
        border: 1px solid #0aa;
    }
</style>
<section>
    <div class="item_01">
        <input type="checkbox">
        <input type="radio">
    </div>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=1)

### 3. input\[type=color]

\*\*WebKit：\*\*提供了两个伪元素， `::-webkit-color-swatch-wrapper` 和 `::-webkit-color-swatch`。目前 IE10 以及 FireFox21 还没有支持 input\[type=color] ，自然也没有响应的伪元素支持，Chrome浏览器下可以。

![image-20200816152906684](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816152906684.png)

```html
<style>
    .box_02 input { width: 120px; }
    .item_02::-webkit-color-swatch-wrapper { 
        border: 1px solid #777;
        background-image: linear-gradient(to right, red, orange 15%, yellow 30%, green 50%, darkcyan 65%, blue 80%, purple);
    }
    .item_02::-webkit-color-swatch {
        height: 21px;
        position: relative;
        left: 135px;
        top: -5px; 
    }
</style>

<section class="box_02">
    <input type="color">
    <br /><br />
    <input class="item_02" type="color">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=2)

### 4. input\[type=date]

\*\*WebKit：\*\*下面8个伪元素是webkit专为定制输入日期

* ::-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：控制年份
* ::-webkit-inner-spin-button：控制上下小箭头，即控制时期增减的两个小三角
* ::-webkit-calendar-picker-indicator：控制下拉小箭头，即点击弹出日期选择框的小三角

下面有这些元素（Shadow Dom）的内部结构：

![image-20200816155346308](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816155346308.png)

![image-20200816154842326](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816154842326.png)

```html
<style>
   .item_03::-webkit-datetime-edit { padding: 1em; background: #f2f2f2; }
   .item_03::-webkit-datetime-edit-fields-wrapper { background: silver; }
   .item_03::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
   .item_03::-webkit-datetime-edit-month-field { color: blue; }
   .item_03::-webkit-datetime-edit-day-field { color: green; }
   .item_03::-webkit-datetime-edit-year-field { color: purple; }
   .item_03::-webkit-inner-spin-button { display: none; }
   .item_03::-webkit-calendar-picker-indicator { background: #f2f2f2; color: orange }   
</style>
<section>
   <input type="date">
   <br/><br/>
   <input class="item_03" type="date">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=3)

### 5. input\[type=file]

当我们写上`<input type="file">`，所有的渲染引擎会自动创建一个按钮。以前，这个按钮是完全不能设置样式的。然而，最近IE和webkit通过伪元素可以给他们添加样式了。

\*\*Trident：\*\*IE10可以使用 `::-ms-browse` 伪元素给`<input type="file">`按钮添加样式，任何添加给普通按钮的样式，都可以应用给伪元素。

![image-20200816163752603](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816163752603.png)

\*\*WebKit：\*\*Webkit使用 `::-webkit-file-upload-button` 伪元素为 `<input type="file">` 按钮添加样式，同样任何添加给普通按钮的样式，都可以应用给伪元素。

![image-20200816160423474](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816160423474.png)

```html
<style>
    .item_04::-ms-browse {
        background: #0aa;
        color: white;
        padding: 1em;
        border: 1px solid blue;
        line-height: 20px;
    }
    .item_04::-webkit-file-upload-button {
        background: #0aa;
        color: white;
        padding: 1em;
        border: 1px solid blue;
        line-height: 20px;
    }
</style>

<section>
    <input type="file">
    <input class="item_04" type="file">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=4)

### 6. input\[type=number]

\*\*WebKit：\*\*Webkit通过默认的数字选择器提供下拉列表一个控制。虽然不能对这样的元素做过多的控制，但是至少可以隐藏掉下来

以下三个伪元素可以控制：

* ::-webkit-textfield-decoration-container： input内部、上下箭头以及填写数值的外部容器
* ::-webkit-inner-spin-button：就是Chrome下上上下下的小小按钮。样式不一定生效，感觉最大功能主是隐藏按钮。
* ::-webkit-outer-spin-button：？？没测出来是做什么用

![image-20200816161510937](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816161510937.png)

```html
<style>
    .item_05::-webkit-textfield-decoration-container { border: 2px solid red; }
    .item_05::-webkit-inner-spin-button {
        /*color: red; // 无效
        background: blue; // 无效*/
        -webkit-appearance: none;
    }
    .item_05::-webkit-outer-spin-button {} 
</style>

<section>
    <input type="number">
    <br/><br/>
    <input class="item_05" type="number">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=5)

### 7. input\[type=password]

\*\*Trident：\*\*Trident引擎为密码输入框提供的一种控制，就是可以让他显示显示纯文本。而这个控制是通过 `::-ms-reveal` 操作的。你可以在这个控制下修改包括字体颜色，背景色或是显示隐藏的效果。

```html
<style>
    .item_06::-ms-reveal { color: white; background: #0aa; } 
</style>

<section>
    <input type="password">
    <br/> <br/>
    <input class="item_06" type="password">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=6)

### 8. placeholder属性

\*\*Gecko：\*\*火狐引擎用伪元素 `::-moz-placeholder` 控制占位符的文本样式。注意：火狐引擎从 :-moz-placeholder 在firefox的19版时改为 ::-moz-placeholder 。

\*\*Trident：\*\*Trident引擎为占位符文本提供的一个伪类而不是伪元素来设置样式。但是伪类 :-ms-input-placeholder，其他渲染引擎可以用其他的伪元素代替。

\*\*WebKit：\*\*Webkit引擎使用::-webkit-input-placeholder，他也可以修改占位符的字体颜色和字体属性

```html
<style>
    .item_07::-moz-placeholder { color: red; } 
    .item_07:-ms-input-placeholder { color: red; } 
    .item_07::-webkit-input-placeholder { color: red; } 
</style>

<section>
    <input type="text" placeholder="placeholder">
    <input class="item_07" type="text" placeholder="placeholder">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=7)

### 9. input\[type=range]

\*\*Gecko：\*\*火狐在 Firefox22 版提供两个伪元素来设置范围元素的样式，可以给他应用尽可能多的样式

* `::-moz-range-track`：拖动轨道
* `::-moz-range-thumb`：拖动手柄

\*\*Trident：\*\*IE引擎为定制范围元素样式提供一系列很棒的伪元素：

* `::-ms-fill-lower`: 轨道手柄前面
* `::-ms-fill-upper`: 轨道手柄后面
* `::-ms-ticks-before`: 跟踪刻度线范围上
* `::-ms-ticks-after`: 跟踪刻度线范围下
* `::-ms-thumb`: 拖动手柄
* `::-ms-track`: 轨道
* `::ms-tooltip`: 在用户选择一个范围元素时显示工具。注意，这个元素不能设置样式，只能用display隐藏。

![image-20200816171151233](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816171151233.png)

\*\*WebKit：\*\*Webkit为范围元素提供两个伪元素，然而不能给他们添加过多的样式，你可以添加一些颜色和留白

* `::-webkit-slider-runnable-track`：拖动轨道
* `::-webkit-slider-thumb`：拖动手柄

![image-20200816171214647](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816171214647.png)

```html
<style>
    .item_08::-moz-range-track {
        border: 2px solid red;
        height: 20px;
        background: orange;
    }
    .item_08::-moz-range-thumb { background: blue; height: 30px; }
    .item_08::-ms-fill-lower { background: orange; }
    .item_08::-ms-fill-upper { background: green; }
    .item_08::-ms-ticks-after { display: block; color: blue; }
    .item_08::-ms-ticks-before { display: block; color: red; }
    .item_08::-ms-thumb { background: red; }
    .item_08::-ms-track { padding: 20px 0; }
    .item_08::-ms-tooltip { display: none; /* display and visibility only */ }  
    .item_08::-webkit-slider-runnable-track {
        border: 2px solid #0aa;
        background: #f2f2f2;
        padding: 5px 0;
    }
    .item_08::-webkit-slider-thumb { outline: 2px solid #0aa; }
</style>

<section>
    <input type="range">
    <br /> <br />
    <input class="item_08" type="range">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=8)

### 10. input\[type=search]

\*\*WebKit：\*\*默认为搜索框提供一个定制的 ui 带有取消和搜索按钮的伪元素，可以提供定制样式，但除了隐藏，不能做再多的操作。

* `::-webkit-search-cancel-button`
* `::-webkit-search-results-button`

```html
<style>
    .item_09 { -webkit-appearance: none; }
    .item_09::-webkit-search-cancel-button { -webkit-appearance: none; }
    .item_09::-webkit-search-results-button { -webkit-appearance: none; }  
</style>

<section>
    <input type="search">
    <br /> <br />
    <input class="item_09" type="search">
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=9)

### 11. input\[type=text]

\*\*Trident：\*\*IE10使用 ::-ms-value 为文本输入框提供样式（文本输入框，密码输入框等等）和下拉列表，::-ms-clear 控制清除按钮。

![image-20200816173029986](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816173029986.png)

```html
<style>
    .item_10 input { appearance: none; border: 1px solid #0aa; }
    .item_10 ::-ms-value { color: white; background: #0aa; padding: 10px; }
    .item_10 ::-ms-clear { color: #0aa; background: #f2f2f2; padding: 10px; }
</style>

<section>
    <div>
        <input type="text" value="value">
        <input type="password" value="value">
        <select>
            <option selected>option</option>
        </select>
    </div>
    <div class="item_10">
        <input type="text" value="value">
        <input type="password" value="value">
        <select>
            <option selected>option</option>
        </select>
    </div>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=10)

### 12. meter元素

**WebKit：** Webkit提供以下伪元素用于meter元素的显示样式。

* ::-webkit-meter-bar：条
* ::-webkit-meter-even-less-good-value：得分不好时状态
* ::-webkit-meter-optimum-value：得分好时状态
* ::-webkit-meter-suboptimal-value：得分一般时状态

后面三个只有一个，会在给定时间依据 meter 的value 值处于激活状态。

![image-20200816175630375](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816175630375.png)

```html
<style>
    .item_12 ::-webkit-meter-bar {
        height: 30px;
        background: #f2f2f2;
        border: 1px solid #0aa;
    }
    .item_12 ::-webkit-meter-optimum-value { background: green; }
    .item_12 ::-webkit-meter-suboptimum-value { background: orange; }
    .item_12 ::-webkit-meter-even-less-good-value { background: blue; }    
</style>

<section>
    <div>
        <meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
        <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
        <meter low="69" high="80" max="100" optimum="100" value="52">E</meter> 
    </div>
    <div class="item_12">
        <meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
        <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
        <meter low="69" high="80" max="100" optimum="100" value="52">E</meter> 
    </div>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=12)

### 13. progress元素

**WebKit：** Webkit提供三个伪元素，用于进度条样式（必须给进度条元素设置 -webkit-appearance: none）。

* ::-webkit-progress-inner-element
* ::-webkit-progress-bar
* ::-webkit-progress-value

![image-20200816180903272](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816180903272.png)

\*\*Gecko：\*\*Gecko为进度条提供 ::-moz-progress-bar 来设置样式。

**Trident：** 像火狐一样，IE给进度条提供单一的伪元素::-ms-fill。

![image-20200816180916759](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200816180916759.png)

```html
<style>
    .item_13 progress { -webkit-appearance: none; }
    .item_13 ::-webkit-progress-inner-element { background: black; }
    .item_13 ::-webkit-progress-bar { border: 2px solid #0aa; }
    .item_13 ::-webkit-progress-value { background: orange; }
    .item_13 ::-moz-progress-bar { background: red; }
    .item_13 ::-ms-fill { background: red; }
</style>

<section>
    <div>
        <progress max="100" value="50"></progress> 
        <progress max="100" value="75"></progress> 
        <progress max="100" value="90"></progress> 
    </div>
    <div class="item_13">
        <progress max="100" value="50"></progress> 
        <progress max="100" value="75"></progress> 
        <progress max="100" value="90"></progress> 
    </div>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=13)

### 14. select元素

**Trident：** IE10提供::-ms-expand用来修改下拉列表的箭头样式。

```html
<style>
    .item_14 { border: 1px solid #0aa; }
    .item_14::-ms-expand {
        padding: 10px;
        color: red;
        background: #0aa;
        border: 1px solid #0aa;
    }
</style>

<section>
    <select>
        <option selected>One</option>
    </select>
    <br/><br/>
    <select class="item_14">
        <option selected>One</option>
    </select>  
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=14)

### 15. textarea元素

**WebKit：** Webkit提供的 ::-webkit-resizer 用于可以自动控制尺寸的元素，把它添加到文本域的右下角。

::-webkit-resizer 可以用个display：none或是-webkit-appearance: none:隐藏掉，但并不能阻止用户修改 textarea 的尺寸。如果你禁用尺寸调整，可以设置[css属性resize：none](https://developer.mozilla.org/en-US/docs/CSS/resize)。这个不仅可以隐藏控制，也可以在所有浏览器都禁用文本域尺寸调整。

使用 ::-webkit-resizer 也可以添加一些基本的样式。

```html
<style>
    .item_15 { resize: none; }
    .item_15::-webkit-resizer {
        display：none;
        -webkit-appearance: none;

        /*border: 1px solid #0aa;*/
        /*background: #0aa;*/
        /*outline: 1px solid yellow;*/
    } 
</style>

<section>
    <textarea></textarea>
    <textarea class="item_15"></textarea>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=15)

### 16. 表单验证信息

**WebKit：** Webkit是唯一支持[约束验证api](http://www.html5rocks.com/en/tutorials/forms/constraintvalidation)创建验证冒泡的渲染引擎。提供的伪元素如下：

* ::-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块区域

```html
<!--chrome测试，无法修复验证框的样式-->
<style type="text/css">
    .item_16 { border: 1px solid #0aa; }
    .item_16::-webkit-validation-bubble { padding: 1em;  background: red;  }
    .item_16::-webkit-validation-bubble-arrow { background: blue;  }
    .item_16::-webkit-validation-bubble-arrow-clipper { border: 2px solid black;  }
    .item_16::-webkit-validation-bubble-heading { background: green;  }
    .item_16::-webkit-validation-bubble-message { color: white;  background: purple;  }
    .item_16::-webkit-validation-bubble-text-block { border: 1px solid red;  padding: 1em; }
</style>

<section>
    <form class="item_16">
        <input type="email" required>
        <br /><br />
        <input type="submit">
    </form>
</section>
```

[查看DEMO](https://1927344728.github.io/demo-lizh/html/14-%E8%A1%A8%E5%8D%95%E4%BC%AA%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.html?type=16)

## 参考链接

[伪元素控制表单样式](https://www.w3cplus.com/css3/list-of-pseudo-elements-to-style-form-controls.html)

[伪元素表单控件默认样式重置与自定义大全](http://www.zhangxinxu.com/wordpress/?p=3381)