มาใส่ icon ให้ Input Text กันดีกว่า
บันทึกโดย วันที่ 22 February 2008 | 414 views
จากรูปด้านบนเอาไปดัดแปลงแต่งหรูในฟอร์มกรอกข้อมูลกันเลยทีเดียว ไม่มีอะไรมากครับเพียงใช้ CSS เข้าช่วย เอาล่ะฝอยมากไปแล้วดูตัวอย่างเลยดีว่า
CSS
<STYLE>.search-box{background-image:url('images/zoom.gif');
background-repeat:no-repeat;
padding-left:20px;
}
.mail-box{
background-image:url('images/mail.gif');
background-repeat:no-repeat;
padding-left:20px;
}
</STYLE>
Body
<input type="text" name="search" class="search-box"><br/> <input type="text" name="search" class="mail-box">
มาดูความหมายของแต่ล่ะบรรทัดของ CSS กันครับ
background-image:url('images/zoom.gif');
บรรทัดนี้เรียก รูป background มาแหม่ะ!กับ TextInput เรา
background-repeat:no-repeat;
บรรทัดนี้สั่งให้ background คงที่ไม่แสดงซ้ำ
padding-left:20px;
บรรทัดนี้สั่งให้ ดันพื้นที่ทางด้านซ้ายขยับไป 20 px จะได้ไม่ไปบัง background icon ที่เราแป่ะไว้ นั่นเอง
คลิกที่นี่ เพื่อดูไฟล์ที่ผมทดสอบดูครับ
ชอบ tip อันนี้มากค่ะ อ่านแล้วทำตามได้ง่ายเพราะบางtip ลองเอาไปลองทำตามแล้วไม่ค่อยเข้าใจ (ฉลาดน้อยน่ะค่ะ)
ขออนุญาติเอาไปใช้ต่อนะคะ
February 24th, 2008 at 1:26 am
อยากให้พี่เทพ css แก้ไข้ส่วนของ body ใน flash ให้หน่อยครับ copy เขามา
แต่มันเปลี่ยนภาษาไม่ได้คครับ ใน File style.css มันมีคำสั่งแค่นี้เอง form { margin:0px; padding:0px,font-family:verdana; color: #0000;}
body { margin:0px; padding:0px; background-color: #FFFFFF;}
ไหว้แหละพี่(เจ้านายเอาตายเลยถ้าแก้ไม่ได้โม้ไว้เยอะ)
July 15th, 2008 at 2:17 pm
dtyb rt yrt
March 12th, 2009 at 11:25 am
ป้ะ จ้ะ บ้ะ จ่ะ ป่ะ จ้ะ ป้ะ จ่ะ
June 19th, 2009 at 12:49 pm