ในโมดูลนี้ คุณจะได้เรียนรู้วิธีจัดรูปแบบการควบคุมแบบฟอร์ม และวิธีจับคู่สไตล์อื่นๆ ของเว็บไซต์
ช่วยผู้ใช้เลือกตัวเลือก
องค์ประกอบ <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;
}
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการควบคุมแบบฟอร์มการจัดรูปแบบ
คุณจะนำสไตล์ของระบบแพลตฟอร์มสำหรับการควบคุมแบบฟอร์มออกได้อย่างไร
appearance: revert;
appearance: none;
revert: appearance;
revert: all;