ออกแบบช่องค้นหาของคุณด้วย CSS

วันนี้ผมจะมาแนะนำวิธีใช้ภาพพื้นหลังใน CSS เพื่อออกแบบช่องค้นหาของคุณ ฉันเคยใช้วิธีอื่นในการใช้แบบฟอร์มและช่องค้นหามาก่อน แต่วิธีนี้ดูเหมือนจะง่ายกว่า ดังนั้นฉันจึงคิดว่าจะแชร์กับทุกคนที่สนใจ

ดู

วิธีการสาธิตดั้งเดิม ก่อนอื่นให้เราดูวิธีการดั้งเดิมของฉันในการใช้ :

วิธีการดั้งเดิม

ในเวอร์ชันที่ปรับปรุงแล้วของวิธีการนี้ ฉันตัดสินใจว่าจะไม่ใช้ type="image" แต่ใช้แท็ก จากนั้นจึงเพิ่มพื้นหลังโดยใช้ CSS ซึ่งช่วยให้กล่องและปุ่มป้อนข้อความสามารถจัดแนวได้โดยอัตโนมัติ ฉันยังเพิ่ม :focus pseudo-class ให้กับเอฟเฟกต์สุดท้ายด้วย (IE จะไม่รองรับสิ่งนี้ ดังนั้นฉันจึงเพิ่มสไตล์พิเศษสำหรับ IE เพื่อซ่อนเอฟเฟกต์นี้) ประโยชน์ของแนวทางนี้มีดังนี้:

การจัดตำแหน่งอย่างเป็นธรรมชาติโดยใช้รูปภาพเพียงรูปเดียวสำหรับปุ่มและช่องป้อนข้อมูล
:focus pseudo-class รองรับเบราว์เซอร์ที่เพิ่มเอฟเฟกต์โฮเวอร์ให้กับปุ่ม

HTML

http://www.sohtanaka.com/ ">

<ประเภทอินพุต = "ข้อความ" class = "กล่อง" />

ค้นหา

CSS

fieldset.search {
เส้นขอบ: ไม่มี;
ความกว้าง: 243px;
ระยะขอบ: 0 อัตโนมัติ;
พื้นหลัง: #222;
-
.อินพุตการค้นหา, ปุ่ม .ค้นหา {
เส้นขอบ: ไม่มี;
ลอย: ซ้าย;
-
.ค้นหาอินพุต.กล่อง {
สี: #fff;
ขนาดตัวอักษร: 1.2em;
ความกว้าง: 190px;
ความสูง: 30px;
การขยาย: 8px 5px 0;
พื้นหลัง: #616161 url(search_bg.gif) ไม่ซ้ำ;
ขอบขวา: 5px;
-
.ค้นหา input.box:โฟกัส {
พื้นหลัง: #616161 url(search_bg.gif) ไม่ซ้ำซ้าย -38px;
โครงร่าง: ไม่มี;
-
.ปุ่มค้นหา.btn {
ความกว้าง: 38px;
ความสูง: 38px;
เคอร์เซอร์: ตัวชี้;
เยื้องข้อความ: -9999px;
พื้นหลัง: #fbc900 url(search_bg.gif) ไม่ทำซ้ำด้านบนขวา;
-
.ค้นหาปุ่ม btn: โฮเวอร์ {
พื้นหลัง: #fbc900 url(search_bg.gif) ไม่ทำซ้ำด้านล่างขวา;
}ความคิดเห็นพิเศษของ IE

IE style-ie.css
เพื่อนคนหนึ่งแสดงความคิดเห็นว่า IE6 และ IE7 จะเลื่อนภาพพื้นหลังในแนวนอนหากคุณป้อนข้อความมากเกินไป ดังนั้นแนวทางของฉันคือใช้ภาพพื้นหลังแยกต่างหากสำหรับ IE โดยเฉพาะ และแทนที่จะจัดชิดซ้าย ฉันพลิกมันและจัดพื้นหลังให้ตรงกัน รูปภาพทางด้านขวาเพื่อแก้ไขปัญหานี้

.ค้นหาอินพุต.กล่อง {
พื้นหลัง: url(search_bg_ie.gif) ไม่ทำซ้ำด้านล่างขวา;
/* ภาพพื้นหลังอิสระสำหรับ IE โดยเฉพาะ และรูปภาพนี้ต้องจัดชิดขวา -
-