เพิ่มสีพื้นหลังในช่องกรอกฟอร์มด้วย CSS

เพื่อเพิ่มสีพื้นหลังในช่องกรอกฟอร์ม ให้ใช้คุณสมบัติ background-color

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อเพิ่มสีพื้นหลังในช่องกรอก:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type=text] {
      width: 100%;
      padding: 10px 15px;
      margin: 5px 0;
      box-sizing: border-box;
      background-color: gray;
    }
  </style>
</head>
<body>
  <p>กรอกฟอร์มด้านล่าง:</p>
  <form>
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="sub">
    <label for="student">Student</label>
    <input type="text" id="student" name="stu">
  </form>
</body>
</html>

คำอธิบาย: box-sizing: border-box ทำให้ padding และ border รวมอยู่ใน width 100% background-color: gray ให้พื้นหลังสีเทา สามารถเปลี่ยนเป็นสีอื่นได้ เช่น #f2f2f2 สำหรับสีเทาอ่อน