表单字体样式

单选框 /复选框

单选框或复选框与文字默认情况下是以 vertical-align:baseline 的方式对齐的，这也是导致单选框或复选框与文字在垂直方向不居中对齐的原因。因此，我们可以使用 vertical-align 属性来解决。

vertical-align:像素值 ;

• 当文字大小为 12px 时，我们给单选框或复选框定义" vertical-align:-3px"即可解决对齐问题
• 当文字大小为 14px 时，我们给单选框或复选框定义" vertical-align:-2px"即可解决对齐问题

textarea

• 固定大小，禁用拖动

• 使用 min-width 和 min-height 来定义 textarea 的最小宽度和最大高度，也可以使用 max-width 和 max-height 来定义 textarea 的最大宽度和最大高度

• 将 max-width 与 width 定义相同值，并且将 max-height 与 height 定义相同值

• 想要彻底禁止用户拖动小三角来改变 textarea 元素大小，可以使用 CSS 中的 resize 属性来实现" resize:none"表示禁用 textarea 元素的拖动功能，此时 textarea 元素右下方的小三角会消失

• 在 chrome 、 Firefox 和 IE 实现相同的外观 <li style="list-style:none">textarea 元素有 cols 和 rows 两个属性，其中 cols 用来控制列数（也就是每行文字个数）， rows 用来控制行数。但是如果使用 cols 和 rows 属性来控制 textarea 的外观大小，我们会发现以下两个特点
• Chrome （或 Firefox ）和 IE 下，每行字数和文字的列数是不相同的
• 默认情况下， IE 是有滚动条的，而 Chrome （或 Firefox ）是没有滚动条的 <li style="list-style: none;">怎么使得 textarea 在 Chrome （或 Firefox ）和 IE 下具有相同的外观效果
• 使用 CSS 的 width 和 height 来定义 textarea 的大小
• 使用" overflow:auto"来定义 textarea 的滚动条自适应

表单对齐

• 每一行表单分为左栏加若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。左栏一般是一个 label ，右栏是若干个文本框
• 所有左栏盒子和右栏盒子都设置为左浮动
• 左栏 text-align 属性定义为 right ，使得文字右对齐
• 每一行中左栏长度和右栏所有盒子的总长度之和等于行宽。这里的盒子是包括 width 、 padding 、 border 和 margin 的
• Chrome （或 Firefox ）和 IE 下，每行字数和文字的列数是不相同的
• 默认情况下， IE 是有滚动条 的，而 Chrome （或 Firefox ）是没有滚动条的 <li style="list-style: none;"> 怎么使得 textarea 在 Chrome （或 Firefox ）和 IE 下具有相同的外观效果
• 使用 CSS 的 width 和 height 来定义 textarea 的大小
• 使用" overflow:au to"来定义 textarea 的滚动条自适应
• 每一行表单分为左栏加若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。左栏一般是一个 label ，右栏是若干个文本框
• 所有左栏盒子和右栏盒子都设置为左浮动
• 左栏 text-align 属性定义为 right ，使得文字右对齐
• 每一行中左栏长度和右栏所有盒子的总长度之和等于行宽。这里的盒子是包括 width 、 padding 、 border 和 margin 的

caret-color

设置元素内光标的样式：

caret-color: auto | color;