Add notes.

Author: cssmagic

.gitignore

@@ -35,3 +35,4 @@ notes/*/*.md
 !notes/*/506.md
 !notes/*/508.md
 !notes/*/509.md
+!notes/*/603.md

doc/index.md

@@ -60,7 +60,7 @@ issue: 17
 **第六章** | **用户体验**|| [购买后阅读 <sup>↗</sup>](http://www.ituring.com.cn/tupubarticle/9398)|
 601| [29] 选用合适的鼠标光标|-|〃|-
 602| [30] 扩大可点击区域|-|〃|-
-603| [31] 自定义复选框|[试读](https://github.com/cssmagic/CSS-Secrets/issues/14)|〃|-
+603| [31] 自定义复选框|[试读](https://github.com/cssmagic/CSS-Secrets/issues/14)|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/72)
 604| [32] 通过阴影来弱化背景|-|〃|-
 605| [33] 通过模糊来弱化背景|-|〃|-
 606| [34] 滚动提示|-|〃|-

notes/chapter-6/603.md

@@ -0,0 +1,47 @@
+---
+title: "[注解] [603] 自定义复选框"
+issue: 72
+---
+
+## 花絮与注解
+
+#### 第 150 页 ‧ 脚注 ②
+
+> ② 据 CSS 2.1 规范所述：“替换元素的特征在于，其内容超出了 CSS 格式化模型的范畴，比如图片、嵌入的文档或小应用程序等。” 原则上我们无法为替换元素添加生成性内容，尽管某些浏览器可能会允许这样做。
+
+WebKit 浏览器允许我们为复选框添加伪元素。虽然 CSS 规范很可能永远也不会支持这种行为，但浏览器擅自增加这种行为也没有破坏规范，因此我估计 WebKit 的这个特性并不会很快发生变化。
+
+因此，从务实的角度出发，我认为这个特性是可以利用的。一旦放开这个禁忌，我们可以实现 “更好的” 自定义复选框（待续）。
+
+#### 第 151 页 ‧ 侧栏警告
+
+> 在使用宽松的选择符时一定要小心。对于那些后面没有 `label` 的复选框来说（比如它是被嵌套进一个 `label` 的），使用 `input[type="checkbox"]` 选择符**也会把它们隐藏起来**，从而损害可用性。
+
+在实际项目中，通常不会直接写这么宽松的选择符，因为 `input` 标签一般不会光秃秃地什么 class 都不加。
+
+或者从更实际的角度来看，在实践中，我们写好的自定义复选框样式通常会抽象出来，以便在网站的各处复用。参照市面上绝大多数样式库的接口风格，我们最终选用的抽象方案往往就是先约定结构，然后把可复用的样式抽象为 class 暴露出来。这样一来，原文警告的风险就不存在了，因为我们的工作方式并不是通过选择符来把样式匹配到复选框身上，而是以添加 class 的方式精确地为需要美化的复选框（及其配套的 `label` ）加样式。
+
+稍微解释一下整个过程吧。比如我们为自定义复选框约定了如下结构：
+
+```html
+<span class="my-pretty-checkbox">
+	<input type="checkbox" id="foobar">
+	<label for="foobar">...</label>
+</span>
+```
+
+同时配套的样式是这样写的：
+
+```css
+.my-pretty-checkbox {
+	display: inline-block;
+}
+.my-pretty-checkbox input[type="checkbox"] {
+	/* ... */
+}
+.my-pretty-checkbox label {
+	/* ... */
+}
+```
+
+那么接下来，如果我们需要在网站的某处放置一个美化过的复选框，直接把上面约定好的结构作为复选框来用就好了。我们可以把这段结构视作一个 “组件”，如果你不是这个组件的维护者，甚至都不需要关心它内部是如何实现的，只管拿来用就好了。