เทมเพลต CSS สำหรับช่องกรอกข้อมูล: ตกแต่งด้วย border-radius และ padding

📝 การใช้งาน

เทมเพลตนี้ใช้สำหรับเพิ่ม border-radius และ padding ให้กับช่องกรอกข้อมูล

📘 คำอธิบาย

โค้ดนี้ใช้ `border-radius` เพื่อทำให้มุมของช่องกรอกข้อมูลโค้ง และใช้ `padding` เพื่อปรับระยะห่างภายในช่องกรอกข้อมูล กฎ `input:focus` จะเปลี่ยนสีของเส้นขอบเมื่อช่องกรอกข้อมูลได้รับการเลือก

เส้นขอบจะถูกแสดงอยู่ภายนอกขององค์ประกอบ ต่างจากเส้นขอบที่ไม่ส่งผลกระทบต่อขนาดขององค์ประกอบ

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

วิธีการปรับ: เส้นขอบสามารถตั้งค่าได้โดยใช้ outline-width, outline-color, outline-style เป็นต้น

input:focus {
outline-color: #3498db; /* เปลี่ยนสีเส้นขอบเมื่อมีการโฟกัส */
outline: none; /* ลบเส้นขอบออก */
}

นอกจากนี้

คุณสามารถเปลี่ยน outline-color โดยใช้ input:focus ได้เช่นกัน

🔹 โค้ดบางส่วน

<style>
  /* การตกแต่งช่องกรอกข้อมูล */
  input {
    border-radius: 8px; /* มุมโค้ง */
    padding: 10px 15px;  /* ระยะห่างภายใน */
    font-size: 16px;      /* ขนาดฟอนต์ */
    border: 2px solid #ccc; /* เส้นขอบ */
    transition: all 0.3s ease;
  }

  /* สไตล์เมื่อช่องกรอกข้อมูลได้รับการเลือก */
  input:focus {
    border-color: #3498db; /* สีของเส้นขอบเมื่อช่องกรอกข้อมูลได้รับการเลือก */
    outline: none; /* ลบเส้นขอบนอกเมื่อช่องกรอกข้อมูลได้รับการเลือก */
  }
</style>

💻 โค้ดทั้งหมดที่สามารถทำงานได้

<input type="text" placeholder="กรอกชื่อของคุณ" />

<style>
  /* การตกแต่งช่องกรอกข้อมูล */
  input {
    border-radius: 8px; /* มุมโค้ง */
    padding: 10px 15px;  /* ระยะห่างภายใน */
    font-size: 16px;      /* ขนาดฟอนต์ */
    border: 2px solid #ccc; /* เส้นขอบ */
    transition: all 0.3s ease;
  }

  /* สไตล์เมื่อช่องกรอกข้อมูลได้รับการเลือก */
  input:focus {
    border-color: #3498db; /* สีของเส้นขอบเมื่อช่องกรอกข้อมูลได้รับการเลือก */
    outline: none; /* ลบเส้นขอบนอกเมื่อช่องกรอกข้อมูลได้รับการเลือก */
  }
</style>

คัดลอกแล้ว!

🎨 เทคนิคการออกแบบช่องกรอกข้อมูลอย่างมืออาชีพ

การตกแต่งช่องกรอกข้อมูลเป็นองค์ประกอบสำคัญที่ส่งผลโดยตรงต่อประสบการณ์ผู้ใช้ การผสมผสาน border-radius และ padding อย่างเหมาะสมจะช่วยสร้างฟอร์มที่ใช้งานง่ายและสวยงาม

📏 เคล็ดลับการกำหนดขนาดที่เหมาะสม

padding: 10px 15px เป็นขนาดมาตรฐาน แต่บนอุปกรณ์มือถือ ควรเพิ่มเป็น padding: 12px 16px เพื่อให้ง่ายต่อการแตะใช้งาน ค่า border-radius ที่เหมาะสมอยู่ระหว่าง 4px ถึง 12px โดยควรปรับให้เข้ากับสไตล์การออกแบบของเว็บไซต์

🌈 ความหลากหลายของการออกแบบสี

สีขอบในขณะโฟกัส (border-color) สามารถเปลี่ยนแปลงให้เข้ากับธีมสีของเว็บไซต์ได้ เช่น #3498db (สีน้ำเงิน), #4CAF50 (สีเขียว) หรือ #FF7043 (สีส้ม) สำหรับการรองรับโหมดมืด ให้ใช้ @media (prefers-color-scheme: dark) เพื่อกำหนดสีขอบที่สว่างกว่า

✨ การเสริมประสิทธิภาพการโต้ตอบ

เพิ่ม box-shadow ใน transition และตั้งค่า box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3) เมื่อ input:focus จะช่วยให้เอฟเฟกต์โฟกัสเด่นชัดขึ้น อย่างไรก็ตาม ควรใช้อินิเมชันอย่างพอเหมาะ

การออกแบบช่องกรอกข้อมูลควรเน้นที่ฟังก์ชันการใช้งานเป็นหลัก และปรับให้สอดคล้องกับระบบการออกแบบโดยรวมของเว็บไซต์ โดยเฉพาะในหน้าฟอร์มที่ยาว ควรรักษาความสม่ำเสมอของสไตล์เพื่อเพิ่มประสิทธิภาพการใช้งาน