跳到主要内容

表单字体样式

单选框 /复选框

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