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