More Web Hosting at HostDirft.com!

ผู้เขียน หัวข้อ: ตกแต่งฟอร์มล้อกอินสวยๆ ด้วย CSS ง่ายๆแต่ได้สาระโดย มี icon ใน ช่อง input  (อ่าน 1612 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

HostDrift.com

  • โฮสดริฟท์
  • Administrator
  • Full Member
  • *****
  • กระทู้: 106
  • HostDrift Support
    • ดูรายละเอียด
    • ข่าวไอที


เป็น form ธรรมดาแต่นำมาปัดฝุ่นใส่ css ไม่ให้มันธรรมดาง่ายๆ โดย css code

โค๊ด: [Select]
<style type=“text/css”>
<!–
.username {

/* เซตภาพพื้นหลังให้กับ ช่องป้อนข้อมูล*/
background-image: url(images/icons/icon_user.gif);

/*ไม่ต้องรีพีต เดี๋ยวมันเป็นภาพเรียงซ้อนกันเต็ม ช่อง*/
background-repeat: no-repeat;

/*กั้นหน้าซะหน่อย เวลาพิมพ์ ตัวหนังสือจะได้ไม่ทับลงบนภาพพื้นหลัง*/
padding-left: 20px;
}
.password {
background-image: url(images/icons/bullet_key.png);
background-repeat: no-repeat;
padding-left: 20px;

}
–>
</style>

<form id=”form1″ name=”form1″ method=”post” action=”">
<table width=”270″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#f1f1f1″>
<tr>
<td colspan=”2″><strong>Login</strong></td>
</tr>
<tr>
<td width=”33%” align=”right”>UserName : </td>
<td width=”67%”><input name=”txt_username” type=”text” class=”username” id=”txt_username” size=”20″ />
</td>
</tr>
<tr>
<td align=”right”>Password :</td>
<td><input name=”txt_password” type=”text” class=”password” id=”txt_password” size=”20″ />
</td>
</tr>
<tr>
<td align=”right”>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align=”right”>&nbsp;</td>
<td><button type=”button” name=”button” id=”button” ><img src=”images/icons/disk.png” alt=”"

width=”16″ height=”16″ align=”absmiddle” /> บันทึก</button></td>
</tr>
</table>
</form>

ลองเอาปรับเปลี่ยนตามใจชอบเน๊อะ หน้าเว็บจะได้สวยๆขึ้น
ขอบคุณ select2web