แบบฟอร์ม CSS
รูปลักษณ์ของแบบฟอร์ม HTML สามารถปรับปรุงได้อย่างมากด้วย CSS:
การจัดรูปแบบช่องป้อนข้อมูล
ใช้widthคุณสมบัติเพื่อกำหนดความกว้างของช่องใส่ข้อมูล:
ตัวอย่าง
input
{
width: 100%;
}
ตัวอย่างข้างต้นใช้กับองค์ประกอบ <input> ทั้งหมด หากคุณต้องการจัดรูปแบบอินพุตเฉพาะ คุณสามารถใช้ตัวเลือกแอตทริบิวต์ได้:
input[type=text]- จะเลือกเฉพาะช่องข้อความinput[type=password]- จะเลือกเฉพาะช่องรหัสผ่านinput[type=number]- จะเลือกเฉพาะช่องตัวเลข- ฯลฯ..
อินพุตเบาะ
ใช้paddingคุณสมบัติเพื่อเพิ่มช่องว่างภายในช่องข้อความ
เคล็ดลับ:เมื่อคุณมีอินพุตหลายตัวต่อกัน คุณอาจต้องการเพิ่มบางส่วนmarginเพื่อเพิ่มพื้นที่ภายนอกให้มากขึ้น:
ตัวอย่าง
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
โปรดทราบว่าเราได้ตั้งค่าbox-sizingคุณสมบัติเป็น
border-box. ซึ่งจะทำให้แน่ใจได้ว่าช่องว่างภายในและขอบสุดท้ายจะรวมอยู่ในความกว้างและความสูงรวมขององค์ประกอบ
อ่านเพิ่มเติมเกี่ยวกับbox-sizingคุณสมบัติในบทCSS Box Sizing ของเรา
อินพุตแบบมีขอบ
ใช้borderคุณสมบัติเพื่อเปลี่ยนขนาดและสีของเส้นขอบ และใช้border-radiusคุณสมบัติเพื่อเพิ่มมุมโค้งมน:
ตัวอย่าง
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
หากคุณต้องการแค่ขอบล่าง ให้ใช้border-bottomคุณสมบัติ:
ตัวอย่าง
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
อินพุตสี
ใช้background-colorคุณสมบัติเพื่อเพิ่มสีพื้นหลังให้กับอินพุต และcolorคุณสมบัติเพื่อเปลี่ยนสีข้อความ:
ตัวอย่าง
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
อินพุตที่เน้น
ตามค่าเริ่มต้น บางเบราว์เซอร์จะเพิ่มโครงร่างสีน้ำเงินรอบๆ อินพุตเมื่อได้รับการโฟกัส (คลิกที่) คุณสามารถลบลักษณะการทำงานนี้ได้โดยการเพิ่มoutline: none;ข้อมูลเข้า
ใช้:focusตัวเลือกเพื่อทำบางสิ่งกับฟิลด์ป้อนข้อมูลเมื่อได้รับโฟกัส:
ตัวอย่าง
input[type=text]:focus
{
background-color: lightblue;
}
ตัวอย่าง
input[type=text]:focus
{
border: 3px solid #555;
}
ป้อนข้อมูลด้วยไอคอน/รูปภาพ
หากคุณต้องการให้ไอคอนอยู่ภายในอินพุต ให้ใช้background-imageคุณสมบัติและจัดตำแหน่งด้วยbackground-positionคุณสมบัติ นอกจากนี้ สังเกตว่าเราได้เพิ่มช่องว่างภายในขนาดใหญ่เพื่อจองพื้นที่ของไอคอน:
ตัวอย่าง
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
อินพุตการค้นหาแบบเคลื่อนไหว
ในตัวอย่างนี้ เราใช้คุณสมบัติ CSS transitionเพื่อทำให้ความกว้างของอินพุตการค้นหาเคลื่อนไหวเมื่อได้รับโฟกัส คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ
transitionคุณสมบัตินี้ในภายหลังในบทการเปลี่ยน CSS ของเรา
ตัวอย่าง
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
จัดแต่งทรงผม Textareas
เคล็ดลับ:ใช้resizeคุณสมบัติเพื่อป้องกันไม่ให้พื้นที่ข้อความถูกปรับขนาด (ปิดใช้งาน "ตัวจับ" ที่มุมล่างขวา):
ตัวอย่าง
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
จัดแต่งทรงผม เลือกเมนู
ตัวอย่าง
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
จัดแต่งทรงผมปุ่มป้อนข้อมูล
ตัวอย่าง
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบปุ่มด้วย CSS โปรดอ่านบทแนะนำปุ่ม CSSของ เรา
แบบฟอร์มตอบสนอง
ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูเอฟเฟกต์ เมื่อหน้าจอกว้างน้อยกว่า 600px ให้วางสองคอลัมน์ซ้อนกันแทนที่จะอยู่ติดกัน
ขั้นสูง:ตัวอย่างต่อไปนี้ใช้ คิวรี สื่อเพื่อสร้างฟอร์มที่ตอบสนอง คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ในบทต่อไป