เรียนรู้วิธีปรับแต่งช่องทำเครื่องหมายและปุ่มตัวเลือกด้วย Pure CSS

บางครั้งเมื่อเราสร้างแบบฟอร์ม เราจำเป็นต้องใช้ช่องทำเครื่องหมายและอินพุตปุ่มตัวเลือกเพื่อรวบรวมการตั้งค่าของผู้ใช้ ยอมรับข้อกำหนด หรือข้อมูลประชากร องค์ประกอบอินพุต HTML เช่น ช่องทำเครื่องหมายหรือปุ่มตัวเลือกมีลักษณะเริ่มต้น หากคุณต้องการเปลี่ยนรูปลักษณ์เลย คุณสามารถใช้ CSS เพื่อปรับแต่งรูปลักษณ์ตามที่คุณต้องการ บทความนี้จะแสดงตัวอย่างวิธีกำหนดช่องทำเครื่องหมายและอินพุตวิทยุสำหรับแบบฟอร์มหรือหน้าเว็บของคุณ

ตั้งค่า HTML

โค้ดโครงร่าง HTML ที่เราจะจัดรูปแบบนั้นโดยทั่วไปแล้วจะเหมือนกันสำหรับทั้งช่องทำเครื่องหมายและปุ่มตัวเลือก

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

<html>
<head>
 
  <style>
	/* No CSS Here Yet. */
  </style>>
 
</head>
 <body>
   <h2>Radio Button and Checkbox CSS Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked="checked">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <script href="script.js"></script>
 </body>
</html>

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

ชุดที่สองคือช่องทำเครื่องหมาย ช่องทำเครื่องหมายจะใช้เมื่อผู้ใช้สามารถเลือกได้หลายตัวเลือกหากต้องการจากตัวเลือกต่างๆ นอกจากนี้ยังใช้ในจุดที่ผู้ใช้เพียงแค่ต้องการเห็นด้วย/ไม่เห็นด้วยหรือใช่/ไม่ใช่ในบางสิ่ง

องค์ประกอบ HTML เหล่านี้มีลักษณะเริ่มต้น หากคุณต้องการปรับแต่งพวกมัน คุณสามารถทำได้อย่างแน่นอน! คุณสามารถใช้ CSS เพื่อปรับรูปแบบ:

การตั้งค่า CSS

ในการเปลี่ยนสไตล์ของปุ่มตัวเลือกหรือช่องทำเครื่องหมาย คุณต้องแยกย่อยปัญหาตามขั้นตอนต่อไปนี้:

ปรับแต่งฉลาก
1. คุณสมบัติการแสดงผล
2. สัมพันธ์ตำแหน่ง
3. ตัวชี้เคอร์เซอร์
4. ขอบและช่องว่างภายในเพื่อให้ดูสวยงาม
ซ่อนกล่องกาเครื่องหมายเริ่มต้น
1. คุณสมบัติการแสดงผล
สร้างคอนเทนเนอร์ที่จะเป็นกล่องกาเครื่องหมายแบบกำหนดเอง
1. ส่วนสูง
2. ความกว้าง
3. พื้นหลัง
4. ตำแหน่ง – สัมบูรณ์
5. ค่าบน ด้านซ้าย
เพิ่มสิ่งพิเศษที่จะเกิดขึ้นเมื่อวางเมาส์เหนือ (เช่น เปลี่ยนสีพื้นหลังของช่องทำเครื่องหมาย)
เปลี่ยนสีพื้นหลังเมื่อเลือกช่องหรือปุ่ม
ซ่อนเครื่องหมายหรือวงกลมเมื่อไม่ได้เลือก
แสดงเครื่องหมายถูกหรือวงกลมเมื่อเลือก
กำหนดรูปแบบเครื่องหมายถูก
จัดรูปแบบวงกลม

ก่อนที่จะดูโค้ดด้านล่าง เราขอแนะนำให้คุณลองคิดดูเองตามโครงสร้าง HTML และรายละเอียดขั้นตอนในการแก้ปัญหาด้านบน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

รหัสโซลูชัน:

<html>
<head>
 
 <style>
  /* Customize the label (the input) */
label {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
/* Hide the browser's default checkbox */
label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
 
/* Create a custom checkbox container */
.checkmark, .link {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
}
 
/* Add border radius for the radio button */
.circle {
 border-radius: 50%;
}
 
/* On mouse-over, add a background color */
label:hover input ~ .checkmark {
 background-color: #ccc;
}
 
/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
 background-color: #2196F3;
}
 
/* Create the checkmark/circle (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
 
/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
 display: block;
}
 
/* Style the checkmark */
label .checkmark:after {
 left: 10px;
 top: 3px;
 width: 5px;
 height: 15px;
 border: solid white;
 border-width: 0 3px 3px 0;
 /* always check to see if you need to use the css browser prefixes */
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
 
/* Style the radio button circle */
label .circle:after {
 width: 15px;
 height: 15px;
 /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */
 border: none;
 background: white;
 border-radius: 50%;
 left: 20%;
 top: 20%;
}
 
 </style>
 
</head>
 <body>
   <h2>CSS Radio Button and Checkbox Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked>
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example" checked>
     <span class="checkmark"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
   <label class="input">Six
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
 </body>
</html>

คุณมีมัน; ตัวอย่างของปุ่มตัวเลือกและช่องทำเครื่องหมายใน CSS มันอาจจะยากสักหน่อยในตอนแรก แต่คุณจะได้มัน! หากคุณสามารถผ่านแบบฝึกหัด CSS นี้ได้ คุณก็พร้อมที่จะก้าวไปสู่หัวข้อที่ยากขึ้น