เค้าโครงแบบฟอร์มการค้นหา การพัฒนาแบบฟอร์มการค้นหาที่สวยงามใน CSS3 Search form css3
ฉันถูกวิพากษ์วิจารณ์ว่าเลย์เอาต์ห่วย แต่มี HTML5 และ CSS3 ที่ทันสมัย
แน่นอนว่าฉันเข้าใจ มาตรฐานล่าสุดนั้นเจ๋งและทั้งหมดนั้น แต่ความจริงก็คือตามกฎแล้วฉันต้องสร้างเลย์เอาต์ตามสั่งและในกรณีส่วนใหญ่ การระบุตัวตนที่สมบูรณ์ในเบราว์เซอร์ที่แตกต่างกัน เป็นสิ่งสำคัญซึ่งไม่อนุญาตให้ใช้เทคโนโลยีล่าสุด ดังนั้นฉันจึงมุ่งเน้นไปที่ความเข้ากันได้ข้ามเบราว์เซอร์เป็นหลัก และโดยนิสัย ฉันจึงวางแบบฟอร์มการค้นหา "ในแบบเก่า"
โดยทั่วไปแล้ว ในโพสต์นี้ ฉันกำลังแก้ไขสถานการณ์ (เพื่อประโยชน์ของผู้ที่ไม่พอใจกับบทความก่อนหน้า =) และเสนอรูปแบบการค้นหาเดียวกันในเวอร์ชันของตัวเอง แต่ใช้เทคโนโลยี HTML5 และ CSS3
มีตัวอย่างของสิ่งที่จะเกิดขึ้นตามมา
เราสูญเสียอะไรไปเมื่อออกแบบแบบฟอร์มนี้โดยใช้ HTML5 และ CSS3
- IE9 และต่ำกว่า - เราจะไม่เห็นข้อความเริ่มต้น (แอตทริบิวต์ตัวยึดตำแหน่ง)
- IE8 และต่ำกว่า - เราจะไม่เห็นมุมโค้งมนและเงาด้านใน
- IE7 - คุณต้องระบุความกว้างของแบบฟอร์มอื่นเพราะ... มันไม่สนับสนุนคุณสมบัติขนาดกล่อง
- IE6 - แต่เราไม่คำนึงถึงเรื่องนี้เลย =)
ในเบราว์เซอร์สมัยใหม่อื่น ๆ ทุกอย่างเรียบร้อยดี ฉันเชื่อว่าข้อบกพร่องข้างต้นไม่สำคัญ ดังนั้นสำหรับเว็บไซต์ของฉัน ฉันจะใช้แบบฟอร์มที่ออกแบบโดยใช้เทคโนโลยีล่าสุดอย่างปลอดภัย
ค้นหาโค้ด HTML ของแบบฟอร์ม
ดูเหมือนว่านี้:
เมื่อเทียบกับแบบฟอร์มจากบทความที่แล้ว มีการเปลี่ยนแปลงต่อไปนี้ตามเทคโนโลยี HTML5:
- แอตทริบิวต์ type="text" ถูกแทนที่ด้วย type="search"
- สคริปต์อินไลน์ถูกแทนที่ด้วย placeholder="search" .!}
รหัสซีเอสเอส
นี่คือสไตล์ที่จำเป็นทั้งหมดพร้อมความคิดเห็น:
ค้นหา ( /* กำหนดความกว้างที่ต้องการของแบบฟอร์มขึ้นอยู่กับการออกแบบ ** แบบฟอร์มยืดได้โดยไม่มีปัญหา */ ความกว้าง: 35%; /* เราจะวางตำแหน่งปุ่มส่งอย่างแน่นอน ** ดังนั้นคุณสมบัตินี้จึงมีความจำเป็น */ ตำแหน่ง: ) .search อินพุต ( /* ปิดการใช้งานเส้นขอบสำหรับอินพุต */ เส้นขอบ: ไม่มี; ) /* สไตล์สำหรับฟิลด์อินพุต */ .search .input ( /* ขยายฟิลด์อินพุตให้เต็มความกว้างของแบบฟอร์ม */ ความกว้าง : 100%; /* เนื่องจากช่องว่างภายในด้านบน (8px) และด้านล่าง (9px) ** ปรับความสูงของแบบฟอร์ม ** ทำให้ช่องว่างภายในด้านขวา (37px) ใหญ่กว่าด้านซ้าย ** เนื่องจาก ปุ่มส่งจะถูกวางไว้ที่นั่น */ padding: 8px 37px 9px 15px /* เพื่อให้ความกว้างของฟิลด์อินพุต (100%) รวมช่องว่างภายใน */ -moz-box-sizing: border-box; box-sizing: border -box; /* เพิ่มเงาด้านใน */ box-shadow: ใส่ 0 0 5px rgba(0,0 ,0,0.1), ใส่ 0 1px 2px rgba(0,0,0,0.3); / รัศมีเส้นขอบ: 20px; แบบอักษร: 13px Tahoma, Arial, สี sans-serif;
โครงร่าง: ไม่มี; ) /* เปลี่ยนการออกแบบช่องป้อนข้อมูลเมื่อโฟกัส */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); พื้นหลัง: #E8E8E8; color: #333; ) /* ออกแบบปุ่มส่ง */ .search .submit ( /* วางตำแหน่งปุ่มจากขอบด้านขวาของแบบฟอร์ม */ ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; right: 0; width: 37px; /* ยืดปุ่มให้เต็มความสูงของแบบฟอร์ม */ ความสูง: 100%; png) ไม่ทำซ้ำ 50%; /* เพิ่มความโปร่งใสให้กับปุ่มส่ง ; ) /* เมื่อวางเคอร์เซอร์ ให้เปลี่ยนความโปร่งใสของปุ่มส่ง */ .search .submit:hover ( ความทึบ: 0.8; ) /* คุณสมบัตินี้จำเป็นสำหรับในเบราว์เซอร์ ** Chrome และ Safari คุณสามารถจัดรูปแบบอินพุตได้ */ อินพุต ( -webkit-appearance: none; )
และสไตล์สำหรับ IE ต่ำกว่าเวอร์ชัน 9:
/* ตั้งค่าสไตล์แยกต่างหากสำหรับเบราว์เซอร์ IE ที่ต่ำกว่าเวอร์ชัน 9 */ *+html .search ( /* สำหรับ IE7 ปรับความกว้างเป็นเบราว์เซอร์อื่น และเพิ่มการเติมด้านขวา ** เพื่อให้ปุ่มส่งอยู่ในตำแหน่ง */ ความกว้าง: 28 % ; การขยาย: 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input: focus ( เส้นขอบ: 1px ทึบ #CFCFCF; เส้นขอบบน: 1px ทึบ #999; ) .search .submit ( ตัวกรอง: alpha(opacity=50); ) .search .submit:hover ( ตัวกรอง: alpha(opacity=80); )ขอขอบคุณนักวิจารณ์สำหรับความคิดเห็นในบทความที่แล้ว! ขอบคุณคุณ จุดเค้าโครงใหม่บางจุดยังติดอยู่ในหัวของฉัน
องค์ประกอบที่ใช้บ่อยที่สุดประการหนึ่งของเว็บไซต์คือแบบฟอร์มการค้นหา หากคุณต้องการเพิ่มระดับความสะดวกในการใช้งานบนไซต์ของคุณและอำนวยความสะดวกในกระบวนการค้นหาเนื้อหาที่เหมาะสมอย่างมาก คุณควรเริ่มพัฒนาแบบฟอร์มการค้นหาอย่างจริงจัง
ดังนั้น วันนี้เราอยากจะบอกคุณเกี่ยวกับการออกแบบแบบฟอร์มการค้นหาโดยใช้คุณสมบัติ CSS3
ในอดีต คุณอาจพบบทช่วยสอนเกี่ยวกับวิธีออกแบบแบบฟอร์มการค้นหาใน CSS3 แล้ว แต่วันนี้เราต้องการเสนอตัวเลือกที่แตกต่างออกไปเล็กน้อย นั่นคือแบบฟอร์มการค้นหาที่มีเอฟเฟกต์ 3 มิติที่ใช้งานโดยใช้พารามิเตอร์ box-shadow
การทำเครื่องหมาย
ด้านล่างนี้คุณจะเห็นโค้ด HTML ที่ใช้ในการพัฒนาแบบฟอร์มนี้ โปรดทราบว่าตัวเติมของเราได้รับการพัฒนาโดยใช้ HTML5 และเราใช้คุณลักษณะที่จำเป็นทั้งหมด
ตอนแรกเราต้องการใช้ type="search" ที่นำมาใช้ใน HTML5 แต่แล้วเราก็เปลี่ยนใจเนื่องจากเข้ากันไม่ได้กับเบราว์เซอร์สมัยใหม่หลายๆ ตัว ตอนนี้เราจะต้องเพิ่มโค้ด CSS เพิ่มอีกสองสามบรรทัดเพื่อเขียนทับค่าดั้งเดิม
รหัสซีเอสเอส
มาดูสไตล์มินิมอลที่ใช้สร้างกัน รูปร่างสวยงามค้นหาใน CSS3:
แบบฟอร์ม wrapper(
ความกว้าง: 450px;
ช่องว่างภายใน: 8px;
ระยะขอบ: 100px อัตโนมัติ;
ล้น: ซ่อนเร้น;
เส้นขอบกว้าง: 1px;
สไตล์เส้นขอบ: ทึบ;
สีเส้นขอบ: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba (255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
กล่องเงา: 0 3px 3px rgba (255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-รัศมี: 10px;
-webkit-ขอบรัศมี: 10px;
รัศมีเส้นขอบ: 10px;
สีพื้นหลัง: #f6f6f6;
ภาพพื้นหลัง: -webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก(#f6f6f6), ถึง(#eae8e8));
ภาพพื้นหลัง: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, #f6f6f6, #eae8e8);
ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, #f6f6f6, #eae8e8);
ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, #f6f6f6, #eae8e8);
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, #f6f6f6, #eae8e8);
}
wrapper แบบฟอร์ม #search (
ความกว้าง: 330px;
ความสูง: 20px;
การขยาย: 10px 5px;
ลอย: ซ้าย;
ตัวอักษร: ตัวหนา 16px "lucida sans", "trebuchet MS", "Tahoma";
เส้นขอบ: 1px ทึบ #ccc;
-moz-box-shadow: 0 1px 1px #ddd สิ่งที่ใส่เข้าไป, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd สิ่งที่ใส่เข้าไป, 0 1px 0 #fff;
กล่องเงา: 0 1px 1px #ddd สิ่งที่ใส่เข้าไป, 0 1px 0 #fff;
-moz-border-รัศมี: 3px;
-webkit-ขอบรัศมี: 3px;
รัศมีเส้นขอบ: 3px;
}
form-wrapper #search:focus (
โครงร่าง: 0;
ขอบสี: #aaa;
-moz-box-shadow: 0 1px 1px #bbb สิ่งที่ใส่เข้าไป;
-webkit-box-shadow: 0 1px 1px #bbb สิ่งที่ใส่เข้าไป;
กล่องเงา: 0 1px 1px #bbb สิ่งที่ใส่เข้าไป;
}
form-wrapper #search::-webkit-input-placeholder (
สี: #999;
น้ำหนักตัวอักษร: ปกติ;
}
form-wrapper #search:-moz-placeholder (
สี: #999;
น้ำหนักตัวอักษร: ปกติ;
}
form-wrapper #search:-ms-input-placeholder (
สี: #999;
น้ำหนักตัวอักษร: ปกติ;
}
wrapper แบบฟอร์ม #submit (
ลอย: ขวา;
เส้นขอบ: 1px ทึบ #00748f;
ความสูง: 42px;
ความกว้าง: 100px;
ช่องว่างภายใน: 0;
เคอร์เซอร์: ตัวชี้;
ตัวอักษร: ตัวหนา 15px Arial, Helvetica;
สี: #ฟาฟาฟา;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
สีพื้นหลัง: #0483a0;
ภาพพื้นหลัง: -webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก (#31b2c3), ถึง (#0483a0));
ภาพพื้นหลัง: -webkit-linear-gradient(top, #31b2c3, #0483a0);
ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, #31b2c3, #0483a0);
ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, #31b2c3, #0483a0);
ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, #31b2c3, #0483a0);
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, #31b2c3, #0483a0);
-moz-border-รัศมี: 3px;
-webkit-ขอบรัศมี: 3px;
รัศมีเส้นขอบ: 3px;
ข้อความเงา: 0 1px 0 rgba (0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.3) สิ่งที่ใส่เข้าไป, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.3) สิ่งที่ใส่เข้าไป, 0 1px 0 #fff;
กล่องเงา: 0 1px 0 rgba (255, 255, 255, 0.3) สิ่งที่ใส่เข้าไป, 0 1px 0 #fff;
}
form-wrapper #submit:hover,
.form-wrapper #submit:focus (
สีพื้นหลัง: #31b2c3;
ภาพพื้นหลัง: -webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก (#0483a0), ถึง (#31b2c3));
ภาพพื้นหลัง: -webkit-linear-gradient(top, #0483a0, #31b2c3);
ภาพพื้นหลัง: -moz-linear-gradient (ด้านบน, #0483a0, #31b2c3);
ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, #0483a0, #31b2c3);
ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, #0483a0, #31b2c3);
ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, #0483a0, #31b2c3);
}
wrapper แบบฟอร์ม #submit:active (
โครงร่าง: 0;
-moz-box-shadow: 0 1px 4px rgba (0, 0, 0, 0.5) สิ่งที่ใส่เข้าไป;
-webkit-box-shadow: 0 1px 4px rgba (0, 0, 0, 0.5) สิ่งที่ใส่เข้าไป;
กล่องเงา: 0 1px 4px rgba (0, 0, 0, 0.5) แทรก;
}
form-wrapper #submit::-moz-focus-inner (
เส้นขอบ: 0;
}
รองรับเบราว์เซอร์
ด้านล่างนี้คุณจะเห็นภาพหน้าจอที่แสดงแบบฟอร์มการค้นหาของเรา คุณควรทราบว่ามันจะทำงานได้ดีหากเปิดเพจในเบราว์เซอร์เวอร์ชันเก่า ฉันอยากจะเสริมด้วยว่าแบบฟอร์มการค้นหา CSS3 นี้พร้อมใช้งานโดยสมบูรณ์แล้ว
เบราว์เซอร์สมัยใหม่ Chrome, Firefox, Safari, Opera, IE10:
โปรดทราบว่าขณะนี้ Opera รองรับแอตทริบิวต์ตัวยึดตำแหน่งใน HTML5 แต่ไม่สามารถจัดรูปแบบได้
ข่าวดีก็คือ IE10 รองรับ HTML5 filler ด้วย
IE เวอร์ชันก่อนหน้า (6/7/8):
*
สรุปแล้ว
หากคุณได้อ่านบทความก่อนหน้านี้ของเราแล้ว คุณคงทราบดีว่าที่นี่เรากำลังพัฒนาแอปพลิเคชันที่ใช้งานได้ (ทั้งแบบมีและไม่มีเวอร์ชันย้อนกลับ) สำหรับเบราว์เซอร์ทั้งหมด และตัวอย่างนี้ก็ไม่มีข้อยกเว้น
นอกเหนือจากการใช้แบบฟอร์ม CSS3 เพื่อสร้างบล็อกการค้นหาแล้ว คุณยังสามารถปรับเปลี่ยนเพื่อสร้างแบบฟอร์มการอนุญาตหรือแบบฟอร์มสมัครสมาชิกได้อย่างง่ายดาย
สองตัวเลือกสำหรับแบบฟอร์มการค้นหาที่ช่วยให้คุณประหยัดพื้นที่บนเว็บไซต์ของคุณ เมื่อคลิก แบบฟอร์มจะขยายเพื่อให้สามารถป้อนข้อความได้ ใช้เท่านั้น CSS3.
HTML
รูปแบบเรียบง่ายด้วย HTML5แท็ก:
ซีเอสเอส
ก่อนอื่นเรามาเริ่มสไตล์กันใหม่ เว็บคิทเบราว์เซอร์ที่มีแนวโน้มจะเพิ่มลงในเครื่องมือค้นหา ป้อนข้อมูลกรอบแท็กไอคอนปิด เอาสิ่งที่ไม่จำเป็นออกไปให้หมด:
อินพุต ( เค้าร่าง: none; ) อินพุต ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) อินพุต::-webkit-search-ตกแต่ง , input::-webkit-search-cancel-button ( จอแสดงผล: none; /* ลบการค้นหาและยกเลิกไอคอน */ )
มาสร้างแบบฟอร์มการค้นหากันดีกว่า:
เราจะไม่ยึดติดกับคุณสมบัติทั้งหมด เราเพียงแต่สังเกตว่าความกว้างของอินพุตการค้นหามีความสำคัญเป็นอันดับแรก 55pxและจะขยายไปสู่ 130pxในช่วงเวลาแห่งการโฟกัส :จุดสนใจ- คุณสมบัติ การเปลี่ยนแปลงช่วยให้คุณสามารถเคลื่อนไหวการเปลี่ยนแปลงความกว้างนี้ได้ ใช้สำหรับเรืองแสง กล่องเงา:
อินพุต ( พื้นหลัง: #ededed url(search-icon.png) ไม่ทำซ้ำ 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz- รัศมีเส้นขอบ: 10em; รัศมีเส้นขอบ: 10em; -webkit-transition: ทั้งหมด .5s; fff; .5); -moz-box-เงา: 0 0 5px rgba(109,207,246,.5); 0 5px rgba(109,207,246,.5 )
ใน การสาธิต 2 ป้อนข้อมูลช่องค้นหามีขนาดกะทัดรัดยิ่งขึ้น - จะแสดงเฉพาะไอคอนเท่านั้น เมื่อคุณคลิกความกว้างของช่องป้อนข้อมูลก็จะเปลี่ยนไปเช่นกัน
#demo-b อินพุต ( ความกว้าง: 18px; padding-left: 10px; สี: โปร่งใส; เคอร์เซอร์: ตัวชี้; ) #demo-b อินพุต:โฮเวอร์ ( สีพื้นหลัง: #fff; ) #demo-b อินพุต:โฟกัส ( ความกว้าง : 130px; padding-left: 32px;
และข้อความก็โปร่งใส:
#demo-b อินพุต:-moz-placeholder ( สี: โปร่งใส; ) #demo-b อินพุต::-webkit-input-placeholder ( สี: โปร่งใส; )
แบบฟอร์มนี้ใช้ได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด โครเมียม, ไฟร์ฟอกซ์, ซาฟารี, และ IE8+.
ช่องค้นหาอาจเป็นหนึ่งในองค์ประกอบอินเทอร์เฟซผู้ใช้ที่พบบ่อยที่สุด เมื่อทำงานในระดับความสะดวกสบายของอินเทอร์เฟซมักมีความปรารถนาที่จะเพิ่มช่องค้นหาที่มีสไตล์ ใน บทเรียนนี้เราจะสร้างองค์ประกอบยอดนิยมโดยใช้องค์ประกอบหลอก
มาร์กอัป HTML
ในการจัดเตรียมสนามดังกล่าว การทำเครื่องหมายจะน้อยที่สุด
มีการใช้ตัวยึดตำแหน่ง HTML5 พิเศษและแอตทริบิวต์ที่จำเป็นที่นี่:
- ตัวยึดตำแหน่ง- คุณลักษณะนี้ระบุว่าข้อความจะปรากฏในฟิลด์ก่อนที่ฟิลด์จะได้รับโฟกัสอินพุต จากนั้นข้อความจะถูกซ่อน
- ที่จำเป็น- คุณลักษณะนี้ระบุ ข้อกำหนดเบื้องต้นความพร้อมของข้อมูลในช่องป้อนข้อมูลก่อนส่งแบบฟอร์ม
HTML5 ยังมีความหมายใหม่สำหรับแอตทริบิวต์ type: type="search" แต่เบราว์เซอร์รองรับได้ไม่ดี ดังนั้นเราจะไม่ใช้มันในตอนนี้
องค์ประกอบ HTML เช่น img และอินพุตไม่มีเนื้อหา ดังนั้นองค์ประกอบหลอก เช่น:before จะไม่แสดงลูกศรใดๆ สำหรับปุ่ม
วิธีแก้ไขปัญหานี้ในกรณีของเราคือการใช้ปุ่ม type="submit" แทน input type="submit" วิธีนี้เราจะเก็บแบบฟอร์มโดยใช้ปุ่ม ENTER
ซีเอสเอส
ด้านล่างนี้คือสไตล์ที่จำเป็นสำหรับการสาธิตของเรา:
ยกเลิกการตัดข้อความ
Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( Zoom:1; )
องค์ประกอบของแบบฟอร์ม
คำนำหน้าเบราว์เซอร์จะไม่แสดงในโค้ดเพื่อความชัดเจนยิ่งขึ้น คุณสามารถดูรหัสเต็มได้ในข้อความต้นฉบับ
/* ลักษณะสำหรับคอนเทนเนอร์ฟอร์ม */ .form-wrapper ( width: 450px; padding: 15px; Margin: 150px auto 50px auto; พื้นหลัง: #444; พื้นหลัง: rgba(0,0,0,.2); border- รัศมี : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2) /* รูปแบบการป้อนข้อความ */ .form-wrapper input ( width : 330px ; การขยาย: 10px 5px; แบบอักษร: ตัวหนา 15px "trebuchet MS"; เส้นขอบ: 0; รัศมีเส้นขอบ: 3px 0 0 3px; 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper input::-webkit -input-placeholder ( color: #999; Font-weight: Normal; Font-style: italic; ) . อินพุต form-wrapper: -moz-placeholder ( สี: #999; Font-weight: Normal; Font-style: italic ; ) .form-wrapper input:-ms-input-placeholder ( สี: #999; Font-weight: ปกติ; รูปแบบตัวอักษร: ตัวเอียง; ) /* ปุ่มส่งแบบฟอร์ม */ ปุ่ม .form-wrapper ( ล้น: มองเห็นได้; ตำแหน่ง: ลอยแบบสัมพันธ์: ขวา; เส้นขอบ: 0;ช่องว่างภายใน: 0;
