交互性

强调色

使用accentColor 属性设置浏览器生成的界面控件的强调色。

// hardcoded
<label>
  <chakra.input type="checkbox" accentColor="#3b82f6" />
</label>

// token value
<label>
  <chakra.input type="checkbox" accentColor="blue.500" />
</label>

属性	CSS 属性	标记类别
accentColor	accent-color	colors

外观

使用 appearance 属性设置元素的外观。

<chakra.select appearance="none">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</chakra.select>

属性	CSS 属性	标记类别
appearance	appearance	-

插入符颜色

使用 caretColor 属性设置输入框或文本区域中文本光标（插入符）的颜色。

// hardcoded
<chakra.input caretColor="#3b82f6" />

// token value
<chakra.input caretColor="blue.500" />

属性	CSS 属性	标记类别
caretColor	caret-color	colors

光标

使用 cursor 属性设置当鼠标指针悬停在元素上时显示的光标图像。

<Box cursor="pointer" />

属性	CSS 属性	标记类别
cursor	cursor	-

指针事件

使用 pointerEvents 属性控制元素上指针事件的处理方式。

<Box pointerEvents="none">Can't click me</Box>

属性	CSS 属性	标记类别
pointerEvents	pointer-events	-

调整大小

使用 resize 属性控制元素是否可调整大小，如果可以，则控制其调整方向。

<chakra.textarea resize="both" />
<chakra.textarea resize="horizontal" />
<chakra.textarea resize="vertical" />

属性	CSS 属性	标记类别
resize	resize	-

滚动条

使用 scrollbar 属性自定义滚动条的外观。

<Box scrollbar="hidden" maxH="100px" overflowY="auto">
  Scrollbar hidden
</Box>

滚动行为

使用 scrollBehavior 属性设置滚动框在导航或 JavaScript 代码触发滚动时的行为。

<Box maxH="100px" overflowY="auto" scrollBehavior="smooth">
  <div>Scroll me</div>
</Box>

属性	CSS 属性	标记类别
scrollBehavior	scroll-behavior	-

滚动边距

使用 scrollMargin* 属性设置滚动容器周围的边距。

<Box maxH="100px" overflowY="auto" scrollMarginY="2">
  Scrollbar Container with block padding
</Box>

属性	CSS 属性	标记类别
scrollMarginX ,scrollMarginInline	scroll-margin-inline	间距
scrollMarginInlineStart	scroll-margin-inline-start	间距
scrollMarginInlineEnd	scroll-margin-inline-end	间距
scrollMarginY , scrollMarginBlock	scroll-margin-block	间距
scrollMarginBlockStart	scroll-margin-block-start	间距
scrollMarginBlockEnd	scroll-margin-block-end	间距
scrollMarginLeft	scroll-margin-left	间距
scrollMarginRight	scroll-margin-right	间距
scrollMarginTop	scroll-margin-top	间距
scrollMarginBottom	scroll-margin-bottom	间距

滚动内边距

使用 scrollPadding* 属性设置滚动容器内部的内边距。

<Box maxH="100px" overflowY="auto" scrollPaddingY="2">
  Scrollbar Container with block padding
</Box>

属性	CSS 属性	标记类别
scrollPaddingX , scrollPaddingInline	scroll-padding-inline	间距
scrollPaddingInlineStart	scroll-padding-inline-start	间距
scrollPaddingInlineEnd	scroll-padding-inline-end	间距
scrollPaddingY , scrollPaddingBlock	scroll-padding-block	间距
scrollPaddingBlockStart	scroll-padding-block-start	间距
scrollPaddingBlockEnd	scroll-padding-block-end	间距
scrollPaddingLeft	scroll-padding-left	间距
scrollPaddingRight	scroll-padding-right	间距
scrollPaddingTop	scroll-padding-top	间距
scrollPaddingBottom	scroll-padding-bottom	间距

滚动捕捉边距

使用 scrollSnapMargin* 属性设置滚动容器周围的边距。

<Box maxH="100px" overflowY="auto" scrollSnapMarginY="2">
  Scrollbar Container with block padding
</Box>

属性	CSS 属性	标记类别
scrollSnapMargin	scroll-margin	间距
scrollSnapMarginTop	scroll-margin-top	间距
scrollSnapMarginBottom	scroll-margin-bottom	间距
scrollSnapMarginLeft	scroll-margin-left	间距
scrollSnapMarginRight	scroll-margin-right	间距

滚动捕捉类型

使用 scrollSnapType 属性控制滚动容器中捕捉点的强制严格程度。

<Box maxH="100px" overflowY="auto" scrollSnapType="x">
  Scroll container with x snap type
</Box>

值
none	none
x	x var(--scroll-snap-strictness)
y	y var(--scroll-snap-strictness)
both	both var(--scroll-snap-strictness)

滚动捕捉严格程度

使用 scrollSnapStrictness 属性设置元素的滚动捕捉严格程度。这要求 scrollSnapType 设置为 x、y 或 both。

其值可以是 mandatory 或 proximity，并映射到 var(--scroll-snap-strictness)。

<Box maxH="100px" overflowY="auto" scrollSnapStrictness="proximity">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>

属性	CSS 属性	标记类别
scrollSnapStrictness	--scroll-snap-strictness	-

触摸行为

使用 touchAction 属性控制触摸屏用户如何操作元素的区域

<Box touchAction="none" />

属性	CSS 属性	标记类别
touchAction	touch-action	-

用户选择

使用 userSelect 属性控制用户是否可以在元素内选择文本。

<Box userSelect="none">
  <p>Can't Select me</p>
</Box>

属性	CSS 属性	标记类别
userSelect	user-select	-

即将改变

使用 willChange 属性提示浏览器元素属性预期会如何改变。

<Box willChange="transform" />

属性	CSS 属性	标记类别
willChange	will-change	-