CSS: checkbox ​

.instui-checkbox — ช่องทำเครื่องหมาย (checkbox) ดั้งเดิมและป้ายกำกับของมัน หรือสวิตช์ผ่าน -variant-toggle.

ตั้งค่า el.indeterminate = true ใน JavaScript เพื่อแสดงขีดสถานะผสม; เครื่องหมายถูกเมื่อเลือกจะปรับคอนทราสต์โดยอัตโนมัติต่อพื้น — เป็นสีขาวบนพื้นเข้ม, สีแทบดำบนพื้นสว่าง นอกจากนี้จะตั้งค่า gap ของตัวมันเองระหว่างคอนโทรลกับป้าย; การเชนตัวปรับระยะห่าง -gap-* จะเขียนทับค่าที่ฝังมาแล้วนั้น.

Source: checkbox.css

การเข้าถึง ​

<input type="checkbox"> ดั้งเดิมขับเคลื่อน :checked, :indeterminate และ :disabled; ตั้งค่า el.indeterminate = true ใน JavaScript สำหรับสถานะผสม, และทราบว่า -readonly เป็นเพียงการจัดสไตล์เท่านั้นเพราะ checkbox ไม่มีแอตทริบิวต์ readonly ดั้งเดิม.

การใช้งาน ​

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

ตัวอย่าง ​

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>

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.-invalidสถานะไม่ถูกต้อง (ข้อผิดพลาด).
.-label-placement-endวางป้ายไว้หลังคอนโทรล.
.-label-placement-startวางป้ายไว้ก่อนคอนโทรล.
.-label-placement-topวางป้ายไว้เหนือคอนโทรล.
.-readonlyสถานะอ่านอย่างเดียว.
.-requiredแสดงเครื่องหมายดอกจันสำหรับฟิลด์ที่ต้องกรอกถัดจากป้าย.
.-size-largeใหญ่. ชื่อยาวของ -size-lg.
.-size-lgใหญ่.
.-size-smเล็ก.
.-size-smallเล็ก. ชื่อยาวของ -size-sm.
.-variant-toggleเรนเดอร์เป็นสวิตช์แทนกล่อง.

ส่วนประกอบ ​

ส่วนคำอธิบาย
.asteriskเครื่องหมายดอกจันสำหรับฟิลด์ที่ต้องกรอก.

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::afterบน -variant-toggle สัญลักษณ์แสดงสถานะบนด้าม: เป็น X เมื่อปิด, เป็นเครื่องหมายถูกเมื่อเปิด.
::beforeสัญลักษณ์เครื่องหมายถูกหรือขีดที่ถูกปิดบังอยู่ตรงกลางในกล่อง; บน -variant-toggle จะกลายเป็นด้ามเลื่อนแทน.

สถานะ ​

สถานะคำอธิบาย
:checked—
:disabled—
:indeterminate—

พร็อพเพอร์ตีที่กำหนดเอง ​

คุณสมบัติชนิดค่าเริ่มต้นคำอธิบาย
--pantoken-cb-glyph<url>—สัญลักษณ์มาสก์ของกล่อง: เครื่องหมายถูกเมื่อถูกเลือก, ขีดเมื่อไม่แน่นอน.
--pantoken-toggle-bw<length>—ความกว้างของแนวขอบของท็อกเกิ้ล.
--pantoken-toggle-h<length>—ความสูงของสวิตช์ท็อกเกิ้ล.
--pantoken-toggle-handle<length>—เส้นผ่านศูนย์กลางที่คำนวณของด้ามจับ.
--pantoken-toggle-inset<length>—การยุบของด้ามจากขอบแต่ละด้านของแทร็ก.
--pantoken-toggle-w<length>—ความกว้างของแทร็กท็อกเกิ้ล.

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-border-width-sm<length>0.0625rem
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-base<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-color-text-muted<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-checkbox-asterisk-color<color>LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-checkbox-background-checked-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-checkbox-background-disabled-color<color>LightDarklight-dark(#E8EAEC, #334450)
--instui-component-checkbox-background-hover-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-checkbox-background-readonly-color<color>LightDarklight-dark(#C7CACD, #6A7883)
--instui-component-checkbox-border-checked-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-border-color<color>LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-checkbox-border-disabled-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-checkbox-border-hover-color<color>LightDarklight-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>LightDarklight-dark(#CF1F24, #F56050)
--instui-component-checkbox-error-border-hover-color<color>LightDarklight-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>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-label-disabled-color<color>LightDarklight-dark(#8D959F, #576773)
--instui-component-checkbox-label-hover-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-label-readonly-color<color>LightDarklight-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

ที่เกี่ยวข้อง ​

  • radio — ส่วนตรงข้ามสำหรับการเลือกเดี่ยว.