มาใส่ icon ให้ Input Text กันดีกว่า

ดัดแปลงแต่งหรูในฟอร์มกรอกข้อมูล ไม่มีอะไรมากครับเพียงใช้ 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 ที่เราแป่ะไว้ นั่นเอง

คลิกที่นี่ เพื่อดูไฟล์ที่ผมทดสอบดูครับ

You can leave a response, or trackback from your own site. Responses are currently closed, but you can trackback from your own site. You can skip to the end and leave a response. Pinging is currently not allowed. Both comments and pings are currently closed.
Powered by WordPress | Shop Free T-Mobile Phones Online | Thanks to Verizon Phones without Contract, MMORPG Games and Sell Car