วันนี้ผมจะมาแนะนำวิธีใช้ภาพพื้นหลังใน CSS เพื่อออกแบบช่องค้นหาของคุณ ฉันเคยใช้วิธีอื่นในการใช้แบบฟอร์มและช่องค้นหามาก่อน แต่วิธีนี้ดูเหมือนจะง่ายกว่า ดังนั้นฉันจึงคิดว่าจะแชร์กับทุกคนที่สนใจ
ดู
วิธีการสาธิตดั้งเดิม ก่อนอื่นให้เราดูวิธีการดั้งเดิมของฉันในการใช้ <input type="image" src="image_url" />:
<form method="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<ชุดสนาม>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="ค้นหา" class="btn" />
</ฟิลด์เซต>
</form>ดูดี แต่มีข้อเสียอยู่ ปุ่มรูปภาพไม่ตรงกับช่องค้นหา ฉันต้องใช้แอตทริบิวต์ขอบด้านบนติดลบเพื่อแก้ไขข้อบกพร่องนี้
วิธีการดั้งเดิม
ในเวอร์ชันที่ปรับปรุงแล้วของวิธีการนี้ ฉันตัดสินใจว่าจะไม่ใช้ type="image" แต่ใช้แท็ก <button> จากนั้นจึงเพิ่มพื้นหลังโดยใช้ CSS ซึ่งช่วยให้กล่องและปุ่มป้อนข้อความสามารถจัดแนวได้โดยอัตโนมัติ ฉันยังเพิ่ม :focus pseudo-class ให้กับเอฟเฟกต์สุดท้ายด้วย (IE จะไม่รองรับสิ่งนี้ ดังนั้นฉันจึงเพิ่มสไตล์พิเศษสำหรับ IE เพื่อซ่อนเอฟเฟกต์นี้) ประโยชน์ของแนวทางนี้มีดังนี้:
การจัดตำแหน่งอย่างเป็นธรรมชาติโดยใช้รูปภาพเพียงรูปเดียวสำหรับปุ่มและช่องป้อนข้อมูล
:focus pseudo-class รองรับเบราว์เซอร์ที่เพิ่มเอฟเฟกต์โฮเวอร์ให้กับปุ่ม
HTML
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset class="ค้นหา">
<ประเภทอินพุต = "ข้อความ" class = "กล่อง" />
<button class="btn" title="ส่งการค้นหา">ค้นหา</button>
</ฟิลด์เซต>
</ แบบฟอร์ม> 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
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE style-ie.css
เพื่อนคนหนึ่งแสดงความคิดเห็นว่า IE6 และ IE7 จะเลื่อนภาพพื้นหลังในแนวนอนหากคุณป้อนข้อความมากเกินไป ดังนั้นแนวทางของฉันคือใช้ภาพพื้นหลังแยกต่างหากสำหรับ IE โดยเฉพาะ และแทนที่จะจัดชิดซ้าย ฉันพลิกมันและจัดพื้นหลังให้ตรงกัน รูปภาพทางด้านขวาเพื่อแก้ไขปัญหานี้
.ค้นหาอินพุต.กล่อง {
พื้นหลัง: url(search_bg_ie.gif) ไม่ทำซ้ำด้านล่างขวา;
/* ภาพพื้นหลังอิสระสำหรับ IE โดยเฉพาะ และรูปภาพนี้ต้องจัดชิดขวา -
-