ส่วนควบคุมการจัดรูปแบบแบบฟอร์ม

ในโมดูลนี้ คุณจะได้เรียนรู้วิธีจัดรูปแบบการควบคุมแบบฟอร์ม และวิธีจับคู่สไตล์อื่นๆ ของเว็บไซต์

ช่วยผู้ใช้เลือกตัวเลือก

องค์ประกอบ <select>

รูปแบบเริ่มต้นขององค์ประกอบ <select> จะดูไม่ดีและลักษณะที่ปรากฏไม่ตรงกันระหว่างเบราว์เซอร์

ก่อนอื่น มาเปลี่ยนลูกศรกัน

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

วิธีนำลูกศรเริ่มต้นขององค์ประกอบ <select> ออก ใช้พร็อพเพอร์ตี้ CSS appearance หากต้องการแสดงลูกศรที่ต้องการ ให้กําหนดลูกศรเป็น background

คุณควรเปลี่ยน font-size เป็นอย่างน้อย 1rem ด้วย (ซึ่งสำหรับเบราว์เซอร์ส่วนใหญ่จะมีค่าเริ่มต้น 16 พิกเซล) สำหรับองค์ประกอบ <select> เพราะจะทำให้ไม่สามารถซูมหน้าบน iOS Safari เมื่อโฟกัสการควบคุมแบบฟอร์มอยู่

นอกจากนี้คุณยังเปลี่ยนสีขององค์ประกอบให้ตรงกับสีของแบรนด์ได้ด้วยเช่นกัน หลังจากเพิ่มรูปแบบเพิ่มเติมสําหรับการเว้นวรรค :hover และ :focus ลักษณะที่ปรากฏขององค์ประกอบ <select> จะสอดคล้องกันระหว่างเบราว์เซอร์

โปรดดูในการสาธิตต่อไปนี้จาก การจัดรูปแบบ "เลือกให้ถูกใจ" สำหรับปี 2019

แล้วองค์ประกอบ <option> ล่ะ องค์ประกอบ <option> มีชื่อเรียกว่า องค์ประกอบที่ถูกแทนที่ซึ่งมีตัวแทนอยู่นอกขอบเขตของ CSS ในระหว่างที่เขียนนี้ คุณไม่สามารถจัดรูปแบบองค์ประกอบ <option> ได้

ช่องทำเครื่องหมายและปุ่มตัวเลือก

ลักษณะที่ปรากฏของ <input type="checkbox"> และ <input type="radio"> จะแตกต่างกันไปในแต่ละเบราว์เซอร์

เปิดการสาธิตในเบราว์เซอร์ต่างๆ เพื่อดูความแตกต่าง มาดูวิธีตรวจสอบว่าช่องทำเครื่องหมายและปุ่มตัวเลือกตรงกับแบรนด์ของคุณและดูเหมือนกันในทุกเบราว์เซอร์

ก่อนหน้านี้นักพัฒนาแอปจะจัดรูปแบบการควบคุม <input type="checkbox"> และ <input type="radio"> โดยตรงไม่ได้ ตอนนี้ช่องทำเครื่องหมายและปุ่มตัวเลือกสามารถจัดรูปแบบผ่านองค์ประกอบจำลองได้แล้ว หรือจะใช้เทคนิคการแทนที่ต่อไปนี้เพื่อสร้างรูปแบบที่กำหนดเองสำหรับองค์ประกอบเหล่านี้ก็ได้

ขั้นแรก ให้ซ่อนช่องทำเครื่องหมายและปุ่มตัวเลือกเริ่มต้นด้วยภาพ

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

คุณต้องใช้ position: absolute ร่วมกับ opacity: 0 แทน display: none หรือ visibility: hidden โดยซ่อนตัวควบคุมไว้เท่านั้น ซึ่งจะช่วยให้แน่ใจว่าเบราว์เซอร์จะยังคงแสดง แผนผังการช่วยเหลือพิเศษ โปรดทราบว่าอาจต้องมีการจัดรูปแบบเพิ่มเติมเพื่อให้แน่ใจว่าองค์ประกอบที่ซ่อน ตัวควบคุมแบบฟอร์มยังคงอยู่ในตำแหน่ง "ด้านบน" องค์ประกอบแทนที่ การดำเนินการดังกล่าวจะช่วยให้มั่นใจได้ว่าการวางเมาส์เหนือแท็ก เมื่อเปิดโปรแกรมอ่านหน้าจอหรือเมื่อใช้อุปกรณ์ระบบสัมผัสที่มีการเปิดใช้โปรแกรมอ่านหน้าจอ การควบคุมที่ซ่อนเร้นไว้จะ ค้นพบได้หากแตะเพื่อสำรวจ และตัวระบุโฟกัสที่มองเห็นได้ของโปรแกรมอ่านหน้าจอโดยทั่วไปจะปรากฏในตำแหน่งที่ตัวควบคุม ที่จะแสดงบนหน้าจอ

คุณมีตัวเลือกอื่นในการแสดงช่องทำเครื่องหมายที่กำหนดเองและปุ่มตัวเลือก คุณใช้องค์ประกอบเทียมของ CSS ::before และพร็อพเพอร์ตี้ CSS background หรือใช้รูปภาพ SVG ในหน้า

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS มีศักยภาพมากมายในการตรวจสอบว่าช่องทำเครื่องหมายและปุ่มตัวเลือกตรงกับสไตล์แบรนด์ของคุณ

ดูข้อมูลเพิ่มเติมเกี่ยวกับ การจัดรูปแบบ <input type="checkbox"> และ <input type="radio"> และรูปแบบช่องทำเครื่องหมายที่กำหนดเอง

วิธีใช้สีของเว็บไซต์สำหรับการควบคุมแบบฟอร์ม

คุณต้องการนำรูปแบบเว็บไซต์มาใช้กับการควบคุมแบบฟอร์มด้วยโค้ดเพียงบรรทัดเดียวใช่ไหม คุณสามารถใช้พร็อพเพอร์ตี้ CSS accent-color เพื่อดำเนินการนี้

checkbox {
  accent-color: orange;
}

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการควบคุมแบบฟอร์มการจัดรูปแบบ

แหล่งข้อมูล

• สีเฉพาะจุด
• การจัดรูปแบบองค์ประกอบ <select>
• การช่วยเหลือพิเศษของการควบคุมแบบฟอร์มที่มีการจัดรูปแบบ
• เปิด UI