ลักษณะของรูปแบบ HTML และสามารถดีขึ้นมากด้วย CSS:
จัดแต่งทรงผมช่องใส่
ใช้ width สถานที่ให้บริการในการกำหนดความกว้างของช่องใส่ไปนี้:
ตัวอย่างข้างต้นนำไปใช้กับทุก <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 ซึ่งทำให้แน่ใจว่าชายแดน padding และในที่สุดก็จะรวมอยู่ในความกว้างและความสูงรวมขององค์ประกอบ อ่านเพิ่มเติมเกี่ยวกับ box-sizing คุณสมบัติในของเรา CSS3 กล่องขนาด บท |
|---|
ขอบปัจจัยการผลิต
ใช้ border คุณสมบัติการเปลี่ยนขนาดเส้นขอบและสีและใช้ border-radius คุณสมบัติในการเพิ่มมุมโค้งมน:
หากคุณต้องการเพียงเส้นขอบด้านล่างใช้ border-bottom ทรัพย์สิน:
ปัจจัยการผลิตสี
ใช้ background-color คุณสมบัติการเพิ่มสีพื้นหลังการป้อนข้อมูลและ color คุณสมบัติการเปลี่ยนสีข้อความ:
ปัจจัยการผลิตที่มุ่งเน้น
โดยค่าเริ่มต้นเบราว์เซอร์บางส่วนจะเพิ่มโครงร่างสีฟ้ารอบการป้อนข้อมูลเมื่อได้รับโฟกัส (คลิก) คุณสามารถลบปัญหานี้โดยการเพิ่ม outline: none; เพื่อการป้อนข้อมูล
ใช้ :focus เลือกจะทำอะไรกับช่องใส่เมื่อได้รับโฟกัส:
การป้อนข้อมูลที่มีไอคอน / ภาพ
หากคุณต้องการภายในไอคอนการป้อนข้อมูลให้ใช้ 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;
} ลองตัวเอง» ป้อนข้อมูลการค้นหาเคลื่อนไหว
ในตัวอย่างนี้เราใช้ CSS3 นี้ transition สถานที่ให้บริการในการเคลื่อนไหวความกว้างของการป้อนข้อมูลการค้นหาเมื่อได้รับโฟกัส คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ transition สถานที่ให้บริการต่อมาในของเรา CSS3 เปลี่ยน บท
ตัวอย่าง
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} ลองตัวเอง» จัดแต่งทรงผม textareas
เคล็ดลับ: ใช้ resize ของสถานที่เพื่อป้องกันไม่ให้ textareas จากการถูกปรับขนาด (ปิดการใช้งาน "Grabber" ที่มุมขวาล่าง):
ตัวอย่าง
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