ประเภทอินพุต CSS

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

รูปแบบและตัวอย่าง

ในขณะที่คุณอ่านบทความนี้ให้อ้างอิงถึง Codepen ที่มาพร้อมกัน
ฉันคิดว่าคุณมีประสบการณ์ในการสร้างแบบฟอร์มด้วย HTML ดังนั้นฉันจะไม่ครอบคลุม HTML โดยละเอียด
หากไม่ได้ใส่สไตล์ใดๆ รูปร่างของเราก็จะประมาณนี้:

หากเราอยู่ในทศวรรษ 1990 ก็ไม่ได้แย่ขนาดนั้น ฉันหมายถึงดูที่หน้าแรกของ Netscape (เบราว์เซอร์ยอดนิยมในยุค 90)

แต่เราไม่ได้อยู่ในยุค 90 โชคดีที่วันนี้เรามี CSS และเราสามารถจัดรูปแบบอินพุตได้ด้วยไวยากรณ์ง่ายๆ นี้:

input[type="<type>"] {
  /* styles here */
}

การจัดรูปแบบการป้อนข้อความ

สิ่งแรกที่เราทำได้คือจัดรูปแบบขนาดฟอนต์ของอินพุตและป้ายกำกับของเรา เราสามารถเลือกได้ด้วยคีย์เวิร์ดง่ายๆ ดังนี้:

input, label {
  font-size: 2rem;
  padding: 1rem;
}

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

input[type="text"] {
  border: 0;
  border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
  border: 0;
  border-left: 0.3rem solid mediumspringgreen;
  border-radius: 0.5rem;
}

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

คำเตือน:รายการแบบเลื่อนลง

อินพุตอื่นที่เราสามารถจัดรูปแบบได้คือดรอปดาวน์ แต่มีข้อแม้ ถ้าเราทำ input[type="select"] มันจะไม่เลือกรายการแบบเลื่อนลงของเรา เราต้องใช้ select คีย์เวิร์ดเพื่อเลือกรายการแบบเลื่อนลง

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

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

select {
  padding: 2rem;
  font-size: 2rem;
  width: 25rem;
  border: none;
  border-bottom: 0.3rem solid mediumspringgreen;
}

รูปแบบอินพุตอื่นๆ

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

input[type="number"], input[type="date"] {
  border: 0;
  border-bottom: 0.3rem solid mediumspringgreen; 
}

ด้วย CSS เพียงไม่กี่จังหวะ และด้วยการใช้ตัวเลือกที่ง่ายมาก เราจะทำให้ข้อมูลของเรามีรูปลักษณ์ใหม่!

นี่เป็นเพียงการเริ่มต้น ดังนั้นลองนึกดูว่าคุณสามารถทำอะไรได้อีกบ้าง

อันที่จริง ฉันยังป้อนข้อมูลบางอย่างที่ Codepen ยังไม่เสร็จ ไปข้างหน้าและใช้สไตล์ที่คุณต้องการ คุณรู้อยู่แล้วว่าต้องทำอย่างไร ลุยเลย!