ใส่สไตล์เช็คบ็อกซ์ขั้นสูงด้วย CSS Grid

โมดูล CSS กริดเค้าโครง ไม่เพียง แต่สามารถแก้ปัญหาเลย์เอาต์ของแมมมอ ธ ได้ จัดการกับเป็นเวลานาน, เช่น จัดแต่งทรงผมฉลากช่องทำเครื่องหมาย.

ในขณะที่มีวิธีการที่ค่อนข้างตรงไปตรงมาในการจัดทำฉลากเมื่อมันปรากฏขึ้น หลังจาก ช่องทำเครื่องหมายมันไม่ใช่เรื่องง่ายเมื่อฉลากปรากฏขึ้น ก่อน มัน.

ใส่สไตล์ของเช็คบ็อกซ์โดยไม่มี CSS Grid

จัดแต่งทรงผมฉลาก หลังจาก ช่องทำเครื่องหมายเป็นสิ่งที่นักพัฒนาซอฟต์แวร์ของเราทำมาตั้งแต่เราอ่านเรื่องนี้ที่ไหนสักแห่ง เทคนิคนี้เป็นหนึ่งในตัวอย่างที่ดีและเก่าแก่ของพลวัตอันทรงพลังที่ CSS สามารถครอบครองได้.

นี่คือรหัสที่คุณคุ้นเคยอยู่แล้ว รูปแบบฉลาก หลังจาก ช่องทำเครื่องหมายที่เลือก:

  ป้ายกำกับสำหรับช่องทำเครื่องหมาย 

 อินพุต: เครื่องหมาย + + * style me * / 

ฉลากสไตล์ หลังจาก ช่องทำเครื่องหมาย อาจมีลักษณะเช่นนี้ (อย่างไรก็ตามคุณสามารถใช้กฎสไตล์อื่นได้เช่นกัน):

โค้ด CSS ด้านบนใช้ Combinator พี่น้องที่อยู่ติดกัน ทำเครื่องหมายโดย + สำคัญ. เมื่อมีช่องทำเครื่องหมายอยู่ใน : การตรวจสอบ สถานะ, องค์ประกอบ หลังจาก มัน (โดยปกติป้ายกำกับ) สามารถจัดรูปแบบได้โดยใช้วิธีนี้.

ช่างเป็นเทคนิคที่ง่ายและมีประสิทธิภาพ! สิ่งที่ทำได้ อาจ ไปผิดหรือเปล่า? ไม่มีอะไรจนกว่าคุณจะต้องการแสดงฉลาก ก่อน ช่องทำเครื่องหมาย.

พี่น้องที่อยู่ติดกัน เลือกองค์ประกอบต่อไป; นี่หมายความว่าต้องมีฉลาก หลังจาก ช่องทำเครื่องหมายในซอร์สโค้ด HTML.

ดังนั้นเพื่อให้ป้ายปรากฏ ก่อน ช่องทำเครื่องหมายที่เป็นของบนหน้าจอเราไม่สามารถย้ายไปข้างหน้าช่องทำเครื่องหมายในซอร์สโค้ดได้ ตัวเลือกพี่น้องก่อนหน้าไม่มีอยู่ใน CSS.

ซึ่งเหลือตัวเลือกเดียวเท่านั้น: การเปลี่ยนตำแหน่งช่องทำเครื่องหมายและฉลาก การใช้ แปลง หรือ ตำแหน่ง หรือ ขอบ หรือคุณสมบัติ CSS อื่นที่มีพลังงานแบบ Telekinetic บางอย่างดังนั้นฉลากจะปรากฏทางด้านซ้ายของช่องทำเครื่องหมายบนหน้าจอ.

มีปัญหากับวิธีการแบบดั้งเดิม

ไม่มีอะไร majorly ผิดกับเทคนิคดังกล่าว แต่ก็สามารถ ไม่มีประสิทธิภาพในบางกรณี. ฉันหมายถึงกรณีที่ตำแหน่งที่จัดเรียงใหม่ของช่องทำเครื่องหมายและป้ายกำกับไม่ทำงานอีกต่อไป.

คิดว่าตอบสนอง, เช่น คุณอาจต้องปรับขนาดหรือเปลี่ยนตำแหน่งช่องทำเครื่องหมายตามอุปกรณ์ที่แสดง เมื่อสิ่งนั้นเกิดขึ้นคุณจะ จำเป็นต้องเปลี่ยนตำแหน่งฉลากเช่นกัน, เนื่องจากจะไม่มีการปรับตำแหน่งอัตโนมัติให้กับป้ายกำกับเพื่อตอบสนองต่อการเปลี่ยนตำแหน่ง / การปรับขนาดของช่องทำเครื่องหมาย.

เราสามารถกำจัดข้อเสียนี้ได้ถ้าเราทำได้ จัดเตรียมเค้าโครงที่เป็นของแข็งสำหรับกล่องกาเครื่องหมายและฉลาก, แทนที่จะวางตำแหน่งอย่างคร่าวๆบนหน้าเว็บ.

แต่ระบบเลย์เอาต์เกือบทั้งหมดเช่นตารางหรือคอลัมน์ต้องการให้คุณทำ เพิ่มป้ายกำกับก่อนช่องทำเครื่องหมายในซอร์สโค้ด เพื่อให้ปรากฏบนหน้าจอเหมือนกัน นั่นเป็นสิ่งที่เราไม่ต้องการทำเพราะตัวเลือกองค์ประกอบถัดไปบนฉลากจะหยุดทำงาน.

ในทางกลับกัน CSS Grid เป็นระบบโครงร่างที่ ไม่ ขึ้นอยู่กับตำแหน่ง / คำสั่งขององค์ประกอบในซอร์สโค้ด.

ความสามารถในการจัดลำดับใหม่ของเค้าโครงตารางมีผลกับเจตนา เฉพาะการแสดงผลภาพ, ออกจากคำสั่งเสียงและการนำทางตามลำดับของแหล่งที่มา สิ่งนี้ทำให้ผู้เขียนสามารถควบคุมการนำเสนอแบบเห็นภาพในขณะที่ยังคงคำสั่งซื้อต้นฉบับไม่เปลี่ยนแปลง ... - CSS Grid Layout Module Level 1, W3C

ดังนั้นตาราง CSS เป็นทางออกที่ดีในการ จัดรูปแบบฉลากที่ปรากฏ ก่อน ช่องทำเครื่องหมาย.

ใส่สไตล์ของเช็คบ็อกซ์ด้วย CSS Grid

เริ่มจากโค้ด HTML กันก่อน. คำสั่งของช่องทำเครื่องหมายและฉลากจะยังคงเหมือนเดิม. เราแค่เพิ่มทั้งคู่เข้าไปในกริด.

 
  ป้ายกำกับสำหรับช่องทำเครื่องหมาย 
 

CSS ประกอบดังต่อไปนี้:

 #cbgrid display: grid; ตารางเทมเพลตพื้นที่: "ซ้ายขวา"; ความกว้าง: 150px;  input [type = ช่องทำเครื่องหมาย] กริดพื้นที่: ขวา;  label กริดพื้นที่: left;  

ฉันจะไม่อธิบายอย่างลึกซึ้งเกี่ยวกับวิธีการทำงานของตาราง CSS ตามที่ฉันเขียนไว้แล้ว บทความโดยละเอียดเกี่ยวกับเรื่อง, ที่คุณสามารถอ่านได้ที่นี่ พื้นฐานบางอย่าง: จอแสดงผล: ตาราง คุณสมบัติเปลี่ยนองค์ประกอบเป็นภาชนะตาราง, ตารางพื้นที่ ระบุพื้นที่กริดที่องค์ประกอบนั้นเป็นของและ ตารางแม่แบบพื้นที่ สร้างเค้าโครงกริดซึ่งประกอบด้วยพื้นที่กริดที่แตกต่างกัน.

ในรหัสข้างต้นมี พื้นที่สองตาราง: "ซ้าย" และ "ขวา". พวกเขาทำขึ้น สองคอลัมน์ของแถวกริด. ช่องทำเครื่องหมายเป็นของ "ขวา" พื้นที่และฉลากไปที่ "ซ้าย". ต่อไปนี้คือ ลักษณะที่ปรากฏบนหน้าจอ:

เนื่องจากเราไม่ได้เปลี่ยนการวางตำแหน่งที่เกี่ยวข้องของช่องทำเครื่องหมายและป้ายกำกับในซอร์สโค้ดเราจึงทำได้ ยังคงใช้ combinator พี่น้องที่อยู่ติดกัน:

 อินพุต: เครื่องหมาย + + * style me * / 

โปรดทราบว่ารายการกริดคือ ปิดกั้นเสมอ; มันจะปรากฏขึ้นพร้อมกล่องโดยรอบที่เรียกว่า กล่องระดับกริด. หากคุณไม่ต้องการสิ่งนั้นตัวอย่างเช่นสำหรับฉลาก, ใส่เสื้อคลุมในรายการนั้น (ห่อไว้ในองค์ประกอบอื่น) และ เปิด wrapper นั้นเข้าไปในพื้นที่กริด.

แค่นั้นแหละ หวังว่า CSS CSS จะช่วยคุณกำหนดเค้าโครงของช่องทำเครื่องหมายที่หน้าด้านเหล่านั้น.