ใส่สีสันให้ input สำหรับกรอกข้อมูลของ Form ด้วย CSS [Article ID : 41]

เรื่อง : ใส่สีสันให้ Input กรอกข้อมูลด้วย CSS

หลายท่านคงจะเคยเห็น input สำหรับกรอกข้อมูลนะครับ หลายท่านอาจจะพบว่า เอ...ทำไมเขาใส่สีสันลงไปใน input กรอกข้อมูลเหล่านั้นได้ เขาทำได้อย่างไร เพราะพอเราสร้างฟอร์มขึ้นมาทีไรก็ทำได้แต่อินพุทสีขาวแบบนี้ >>>


แต่เว็บของเขาเป็นแบบนี้ >>>


เขาทำได้อย่างไร...บทความนี้จะมาแนะนำกันครับ...

การทำ input กรอกข้อมูลให้มีสีสัน

เริ่มต้นด้วยการสร้าง CSS ขึ้นมา

1. ให้ทำการสร้าง Form พร้อมกับ Input สำหรับกรอกข้อมูลต่าง ๆ ให้เรียบร้อย จากนั้นให้ทำการเปิดหน้าต่าง CSS Styles ขึ้นมาเพื่อกำหนดค่า (Main Menu ->Window -> CSS Styles) ดังรูป 2. ที่หน้าต่าง CSS Styles ให้กดไปที่ไอคอน New CSS Rule เมื่อกดแล้ว โปรแกรมจะทำการเปิดหน้าต่าง New CSS Rule ขึ้นมาให้เรากำหนดค่า ดังรูป ให้ทำการกำหนดค่า ดังนี้
- Selector Type : Class
- Selector Name : input-color หรือชื่ออื่น ๆ ตามที่ต้องการ
จากนั้นทำการกดที่ปุ่ม OK

3. ที่หน้าต่าง CSS Rule definitions ในส่วนของ Category เลือกไปที่ Background จากนั้นทำการเลือกสีื้นหลังที่จะทำมาใช้เป็นสีของ Input ของเราได้เลยครับ ดังรูป เมื่อเลือกสีได้แล้ว กดที่ปุ่ม OK

นำ CSS ที่สร้างมาใช้กับ Input

4. เมื่อเราสร้าง CSS ที่จะนำมาใช้กับ Input ได้แล้ว จากนั้นให้ทำการเลือกไปที่ Input ที่เราต้องการใส่สีสันลงกับกับอินพุท
5. มาที่ Properties เลือกไปที่ Class และเลือกชื่อ Class ที่เราสร้างไว้ในข้อที่ 2 ดังรูป
6. เมื่อปฏิบัติครบทั้ง 5 ข้อแล้ว เราก็จะได้ Input ที่มีสีสันตามต้องการแล้วครับ ดังรูป

ps.ให้ทำการ Preview ดูกับ Web Browser ครับ
วิธีการข้างต้นนั้น เรายังสามารถกำหนดคุณลักษณะอื่น ๆ ลงไปได้อีกตามคุณสมบัติที่มีของ CSS ครับ อย่างไรให้ลองใช้งานกันดูนะครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

ทำสไลด์โชว์ (Slideshow) แสดงรูปภาพประกอบข่าว โดยใช้ข้อมูลจาก Database

เรื่อง : วิธีการสร้างรูปภาพแบบ Slideshow โดยใช้ข้อมูลจาก Database ผู้อ่านหลายท่านอาจจะเคยเข้าเว็บสำนั...  

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...  

วิธีเปลี่ยน CSS Designer ใน Dreamweaver CC เป็น CSS Styles Panel ในแบบดั่งเดิม

เรื่อง: เปลี่ยน CSS Designer ใน Dreamweaver CC เป็น CSS Styles Panel แบบ CS6 การใช้ CSS...  

สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only)

เรื่อง : การสร้างเมนูเว็บไซต์ด้วย Spry Menu Bar *Dreamweaver CC ไม่มีให้ใช้ครับ Spry เป็น Framework...