表单字体样式
单选框 /复选框
单选框或复选框与文字默认情况下是以 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;