CSS: checkbox

.instui-checkbox — một checkbox gốc và nhãn của nó, hoặc một công tắc qua -variant-toggle.

Đặt el.indeterminate = true bằng JavaScript để hiển thị dấu gạch cho trạng thái hỗn hợp; dấu tích khi được chọn tự tương phản với nền — trắng trên nền tối, gần như đen trên nền sáng. Cũng đặt gap riêng giữa control và nhãn; nối thêm bộ sửa khoảng cách -gap-* sẽ ghi đè giá trị tích hợp đó.

Source: checkbox.css

Khả năng truy cập

Một <input type="checkbox"> gốc điều khiển :checked, :indeterminate, và :disabled; đặt el.indeterminate = true bằng JavaScript cho trạng thái hỗn hợp, và lưu ý rằng -readonly chỉ là kiểu dáng vì checkbox không có thuộc tính readonly gốc.

Sử dụng

css

@import "@pantoken/components/components.css";
@import "@pantoken/components/checkbox.css";

Các ví dụ

html

<label class="instui-checkbox --display-block --mb-sm">
  <input type="checkbox" checked>Checkbox
</label>
<label class="instui-checkbox -variant-toggle">
  <input type="checkbox">Toggle
</label>

Bộ sửa

Bộ sửa	Mô tả
`.-invalid`	Trạng thái không hợp lệ (lỗi).
`.-label-placement-end`	Đặt nhãn phía sau control.
`.-label-placement-start`	Đặt nhãn phía trước control.
`.-label-placement-top`	Đặt nhãn ở phía trên control.
`.-readonly`	Trạng thái chỉ đọc.
`.-required`	Hiển thị dấu sao trường bắt buộc cạnh nhãn.
`.-size-large`	Lớn. Bút danh dài của `-size-lg`.
`.-size-lg`	Lớn.
`.-size-sm`	Nhỏ.
`.-size-small`	Nhỏ. Bút danh dài của `-size-sm`.
`.-variant-toggle`	Hiển thị dưới dạng công tắc thay vì hộp.

Phần

Phần	Mô tả
`.asterisk`	Dấu sao trường bắt buộc.

Phần tử giả

Phần tử giả	Mô tả
`::after`	Trên `-variant-toggle`, glyph trạng thái trên tay cầm: X khi tắt, dấu tích khi bật.
`::before`	Glyph dấu tích hoặc gạch được che ở giữa ô; trên `-variant-toggle` nó trở thành tay cầm trượt thay vào đó.

Trạng thái

Trạng thái	Mô tả
`:checked`	—
`:disabled`	—
`:indeterminate`	—

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
`--pantoken-cb-glyph`	`<url>`	—	Glyph mặt nạ của ô: dấu tích khi được chọn, gạch khi không xác định.
`--pantoken-toggle-bw`	`<length>`	—	Độ dày viền của toggle.
`--pantoken-toggle-h`	`<length>`	—	Chiều cao công tắc toggle.
`--pantoken-toggle-handle`	`<length>`	—	Đường kính tay cầm đã tính.
`--pantoken-toggle-inset`	`<length>`	—	Khoảng cách tay cầm cách mỗi cạnh của track.
`--pantoken-toggle-w`	`<length>`	—	Chiều rộng track của toggle.

Token tiêu thụ

Token	Kiểu	Giá trị
`--instui-border-width-sm`	`<length>`	`0.0625rem`
`--instui-color-background-muted`	`<color>`	LightDark`light-dark(#F2F4F5, #273540)`
`--instui-color-stroke-base`	`<color>`	LightDark`light-dark(#8D959F, #6A7883)`
`--instui-color-text-muted`	`<color>`	LightDark`light-dark(#576773, #AAB0B5)`
`--instui-component-checkbox-asterisk-color`	`<color>`	LightDark`light-dark(#CF1F24, #FA917F)`
`--instui-component-checkbox-background-checked-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-checkbox-background-color`	`<color>`	LightDark`light-dark(#ffffff, #171B21)`
`--instui-component-checkbox-background-disabled-color`	`<color>`	LightDark`light-dark(#E8EAEC, #334450)`
`--instui-component-checkbox-background-hover-color`	`<color>`	LightDark`light-dark(#ffffff, #171B21)`
`--instui-component-checkbox-background-readonly-color`	`<color>`	LightDark`light-dark(#C7CACD, #6A7883)`
`--instui-component-checkbox-border-checked-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-checkbox-border-color`	`<color>`	LightDark`light-dark(#7E8792, #5F6E7A)`
`--instui-component-checkbox-border-disabled-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-checkbox-border-hover-color`	`<color>`	LightDark`light-dark(#334450, #7E8792)`
`--instui-component-checkbox-border-radius`	`<length>`	`0.25rem`
`--instui-component-checkbox-border-readonly-color`	`<color>`	`#8D959F`
`--instui-component-checkbox-border-width`	`<length>`	`0.0625rem`
`--instui-component-checkbox-control-size-lg`	`<length>`	`1.5rem`
`--instui-component-checkbox-control-size-md`	`<length>`	`1.5rem`
`--instui-component-checkbox-control-size-sm`	`<length>`	`1.5rem`
`--instui-component-checkbox-control-vertical-margin`	`<length>`	`0rem`
`--instui-component-checkbox-error-border-color`	`<color>`	LightDark`light-dark(#CF1F24, #F56050)`
`--instui-component-checkbox-error-border-hover-color`	`<color>`	LightDark`light-dark(#CF1F24, #FE7D6A)`
`--instui-component-checkbox-font-family`	`[ <font-family-name> \| <generic-font-family> ]#`	`Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif`
`--instui-component-checkbox-font-size-lg`	`<length>`	`1.25rem`
`--instui-component-checkbox-font-size-md`	`<length>`	`1rem`
`--instui-component-checkbox-font-size-sm`	`<length>`	`0.875rem`
`--instui-component-checkbox-font-weight`	`<integer>`	`400`
`--instui-component-checkbox-gap`	`<length>`	`0.5rem`
`--instui-component-checkbox-label-base-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-checkbox-label-disabled-color`	`<color>`	LightDark`light-dark(#8D959F, #576773)`
`--instui-component-checkbox-label-hover-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-checkbox-label-readonly-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-checkbox-line-height`	`<percentage>`	`125%`
`--instui-component-radio-input-toggle-background-success`	`<color>`	`#03893D`
`--instui-component-radio-input-toggle-handle-text`	`<color>`	`#ffffff`
`--instui-component-radio-input-toggle-medium-height`	`<length>`	`2.5rem`
`--instui-icon-check`	`<image>`	`url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E')`
`--instui-icon-minus`	`<image>`	`url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E')`
`--instui-icon-x`	`<image>`	`url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')`
`--instui-size-choice-control-height-md`	`<length>`	`1.5rem`

Liên quan

radio — Tương đương chọn đơn.

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Các thành phần

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Tiện ích

Quy tắc

Plugins

layout

CSS: checkbox

Khả năng truy cập

Sử dụng

Các ví dụ

Bộ sửa

Phần

Phần tử giả

Trạng thái

Thuộc tính tuỳ chỉnh

Token tiêu thụ

Liên quan

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: checkbox ​

Khả năng truy cập ​

Sử dụng ​

Các ví dụ ​

Bộ sửa ​

Phần ​

Phần tử giả ​

Trạng thái ​

Thuộc tính tuỳ chỉnh ​

Token tiêu thụ ​

Liên quan ​

CSS: checkbox

Khả năng truy cập

Sử dụng

Các ví dụ

Bộ sửa

Phần

Phần tử giả

Trạng thái

Thuộc tính tuỳ chỉnh

Token tiêu thụ

Liên quan