จัดสไตล์ปุ่ม Reset ด้วย CSS

ปุ่มประเภท input สามารถเป็นปุ่ม submit หรือ reset ด้วย CSS เราสามารถจัดสไตล์ปุ่มทุกประเภทในหน้าเว็บได้

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

ลองรันโค้ดด้านล่างเพื่อจัดสไตล์ปุ่ม input type reset และ submit:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="submit"], input[type="reset"] {
      background-color: orange;
      border: none;
      text-decoration: none;
      color: white;
      padding: 20px 20px;
      margin: 20px 20px;
      cursor: pointer;
    }
  </style>
</head>
</body>
  <p>กรอกฟอร์มด้านล่าง:</p>
  <form>
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="sub"><br><br>
    <label for="student">Student</label>
    <input type="text" id="student" name="stu"><br>
    <input type="reset" value="Reset">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

คำอธิบาย: ใช้ Attribute Selector input[type="submit"] และ input[type="reset"] เพื่อเลือกปุ่มทั้งสองประเภทพร้อมกัน แล้วจัดสไตล์ให้เหมือนกัน สีพื้นหลังส้ม ตัวอักษรขาว ไม่มีขอบ มี padding และ cursor เป็น pointer