fancy这个主题很好看嘛
今天把 MDN 上剩余的 HTML CSS 教程也看完。至此， MDN 的 html，css，js 的基础教程全看完了，路线图也可以往下走了。虽然路线图上还有 3 个部分没学到，这 3 个部分打算和别的同时学习。

1. 使用 css 美化表单

总体来讲，表单小部件并不适合用 css 修改。以下是部分解决办法。

1.0 Tweaked

浏览器专有属性，可以解决一部分问题。 最好不要用，但是把 -xxxx-apperance 设置为 none 确实可以解决一些问题。（别的属性就不要设置了）

-webkit-apperance: none; //  关闭基于 webkit 的浏览器的默认样式
-moz-appearance: none; // 关闭基于 Gecko 的浏览器的默认样式
background: none; // 关闭部分浏览器的默认样式（IE，opera，firefox等）

1.1 对于某些组件，并不会从 parent 继承 font-family 和 font-size。

因此手动加继承

input, button, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

1.2 每个小部件的盒子模型都不一样

因此需要统一

select, input, textarea, button {
  width: 100px;
  margin: 0;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

1.3 legend

通过 position 设置为 absolute（并将 parent 的 fieldset 设置为 relative）可以将其移出上边框。 (如果将 legend 设置为 relative，则上边框会有空洞，如下图)

1.4 textarea

textarea 默认 display 是 inline-block，表现通常是这样的：
我们不想这样，但是把inline-block改成 block 又会让 textarea 换行。
因此使用 vertical-align: top; 对齐。

变成下面这样:

1.5 修改复选框和单选按钮的样式，在不同浏览器中是不一样的

如果要改复选框样式，可以先把旧的复选框隐藏（不能用 display: none ，因为我们仍需要能够选中）为了支持旧浏览器，可以用一下代码

// :root 在旧浏览器中没有支持，因此旧复选框不会执行下面的代码，因此不会被移除
:root input[type="chexkbox"] {
  position: absolute;
  left: -1000em;
}

然后给 label 添加伪元素 ::before，设置内容为空，背景为我们想加的样式

:root input[type="checkbox"] + label::before {
  background-image: url("balabala.jpg");
}

这里我们可以直接上传一张包含所有状态样式的图片，然后在不同的状态的时候移动背景图片的位置。这样可以减少 http 请求（和图标字体一样的思想）。
如这张图一整张作为背景。然后不同状态只需要改变位置即可。

:root input[type=checkbox]:checked + label:before {
  background-position: 0 -16px; // 第二张
}

:root input[type=checkbox]:disabled + label:before {
  background-position: 0 -32px; // 第三张
}

:root input[type=checkbox]:checked:disabled + label:before {
  background-position: 0 -48px; // 第四张
}

:root input[type=checkbox]:focus + label:before {
  outline: 1px dotted black; // tab 聚焦的时候的样式
}

1.6 修改 select 的样式

很难，不同浏览器，不同操作系统，不同版本表现都不一样，即使用浏览器专有属性也一样有问题。

1.7 polyfill

如上所述，css 并不适合用来修改小部件的样式。很多部件只能依靠 js 来修改（如日期，颜色选择器），可以用各种 js 库来修改。
polyfill 是一串 js 代码，英文原意为用来涂有裂缝的墙的腻子。
在浏览器中，ployfill 用于在旧浏览器上模拟新功能。
一般 polyfill 的做法是先判断这个浏览器是否支持某功能，如果不支持就添加对应的补丁代码，模拟新的功能。

1.8 表单部件兼容表格

参考 MDN 的这个文章。

前端学习笔记（八）