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

บันทึกโดย TaTump วันที่ 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 ที่เราแป่ะไว้ นั่นเอง

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

Bookmark and Share

4 Responses to “มาใส่ icon ให้ Input Text กันดีกว่า”

  1. pigzBear

    ชอบ tip อันนี้มากค่ะ อ่านแล้วทำตามได้ง่ายเพราะบางtip ลองเอาไปลองทำตามแล้วไม่ค่อยเข้าใจ (ฉลาดน้อยน่ะค่ะ)

    ขออนุญาติเอาไปใช้ต่อนะคะ :)


  2. angkoon

    อยากให้พี่เทพ 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;}
    ไหว้แหละพี่(เจ้านายเอาตายเลยถ้าแก้ไม่ได้โม้ไว้เยอะ)


  3. wow gold

    dtyb rt yrt


  4. appleTea~

    ป้ะ จ้ะ บ้ะ จ่ะ ป่ะ จ้ะ ป้ะ จ่ะ


คอมเม้นท์ซิจ๊ะ