Foundation - Form SASS 参考
描述
您可以使用 SASS 参考更改组件的样式。
变量
下表列出了项目设置文件中的 SASS 变量,这些变量可自定义此组件的默认样式。
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$fieldset-border 自定义字段集的默认边框。 |
边框 | 1px solid $medium-gray |
| 2 |
$fieldset-padding 自定义字段集的默认内部填充。 |
数字 | rem-calc(20) |
| 3 |
$fieldset-margin 自定义字段集的默认边距。 |
Number | rem-calc(18 0) |
| 4 |
$legend-padding 默认情况下,图例文本和字段集边框之间的填充。 |
Number | rem-calc(0 3) |
| 5 |
$form-spacing 表单元素的全局间距。 |
数字 | rem-calc(16) |
| 6 |
$helptext-color 帮助文本的默认颜色。 |
颜色 | #333 |
| 7 |
$helptext-font-size 帮助文本的默认字体大小。 |
数字 | rem-calc(13) |
| 8 |
$helptext-font-style 默认帮助文本的字体样式。 |
关键字 | italic |
| 9 |
$input-prefix-color 表示输入前缀标签的颜色。 |
颜色 | $black |
| 10 |
$input-prefix-background 标签的背景颜色作为输入的前缀。 |
颜色 | $light-gray |
| 11 |
$input-prefix-border 标签周围的边框,将作为输入的前缀。 |
边框 | 1px solid $medium-gray |
| 12 |
$input-prefix-padding 前置/后置输入标签的左/右填充。 |
1rem | |
| 13 |
$form-label-color 表示表单标签的颜色。 |
Color | $black |
| 14 |
$form-label-font-size 表示表单标签的字体大小。 |
数字 | rem-calc(14) |
| 15 |
$form-label-font-weight 表示表单标签的字体粗细。 |
关键字 | $global-weight-normal |
| 16 |
$form-label-line-height 表单标签的行高。数字越大,表示标签和输入字段之间的空间越大。 |
数字 | 1.8 |
| 17 |
$select-background 表示选择菜单的背景颜色。 |
颜色 | #fafafa |
| 18 |
$select-triangle-color 下拉三角形的颜色。设置 transparent 以将其完全删除。 |
颜色 | #333 |
| 19 |
$select-radius 表示选择菜单的默认半径。 |
颜色 | $global-radius |
| 20 |
$input-color 表示文本输入的字体颜色。 |
颜色 | $black |
| 21 |
$input-font-family 表示文本输入的字体系列。 |
Font | inherit |
| 22 |
$input-font-size 表示文本输入的字体大小。 |
Number | rem-calc(16) |
| 23 |
$input-background 表示文本输入的背景颜色。 |
颜色 | $white |
| 24 |
$input-background-focus 表示聚焦文本输入的背景颜色。 |
颜色 | $white |
| 25 |
$input-background-disabled 已禁用的文本输入的背景颜色。 |
颜色 | $light-gray |
| 26 |
$input-border 表示文本输入周围的边框。 |
边框 | 1px solid $medium-gray |
| 27 |
$input-border-focus 表示聚焦文本输入周围的边框。 |
颜色 | 1px solid $dark-gray |
| 28 |
$input-shadow 表示未聚焦时文本输入内的框阴影。 |
阴影 | inset 0 1px 2px rgba($black, 0.1) |
| 29 |
$input-shadow-focus 表示聚焦时文本输入外的框阴影。 |
阴影 | 0 0 5px $medium-gray |
| 30 |
$input-cursor-disabled 表示将鼠标悬停在已禁用的文本输入上时使用的光标。 |
Cursor | default |
| 31 |
$input-transition 表示文本输入上的转换属性。 |
Transition | box-shadow 0.5s, border-color 0.25s ease-in-out |
| 32 |
$input-number-spinners 启用 Chrome 和 Firefox 添加到 <input type='number'> 元素的向上/向下按钮。 |
boolean | true |
| 33 |
$input-radius 表示文本输入的半径。 |
Border | $global-radius |

foundation_forms.html