گذاشتن آیکون گوشه ی فیلد های متنی

+Mohammad+ · Jan 21, 2013

دوستان سلام
چجوری میشه یه آیکون رو بزاریم گوشه ی فیلد متنی .. مثلا کادرهای جستجو رو در نظر بگیرید...
اگه امکانش هست یه مثال بزارید ممنون میشم :rose:

meraj-persian · Jan 22, 2013

من درست نفهمیدم!
اگه مثلا یک سایتی رو مثال بزنید که تو اون چنین چیزی رو دیدید ممنون میشیم.

+Mohammad+ · Jan 22, 2013

تصویر زیر رو ببینید ... چجوری میشه اون آیکون رو گذاشت توی فیلد؟

dexted · Jan 22, 2013

سلام دوست من

من یه راه پیشنهاد می کنم حالا نمیدونم بهترین راه هست یا نه ولی جواب میده. من خودم معمولا واسه چنین کاری میام از اون آیکون رو position اش رو absolute میذارم نسبت به تگ form و به صورت دستی ست می کنم جاشو. این مثال هم زدم ببینید راهگشا هست یا نه.

[HTMLS]
<form style="position:relative">
<input type="text"/>
<input type="button" id="ICON" style="position:absolute"/>
</form>
[/HTMLS]

:rose:

+Mohammad+ · Jan 22, 2013

ممنون .. اگه میشه کد css رو هم بزارید .. بیشتر به اون نیاز دارم

kassit · Jan 22, 2013

خیلی راحت می تونید از background استفاده کنید.
همچنین باید به اندازه پهنای آیکون به کادر ورودی padding بدید.

[CSSS]
input{background: url("icon.png") left no-repeat; padding-left: 25px;}
[/CSSS]

meraj-persian · Jan 22, 2013

اگه راه حل اصلی رو میخواید آدرس اون سایتی که ازش عکس گرفتید رو بدید تا سورس کد رو بررسی کنیم.

farik · Jan 24, 2013

باسلام..
اینم یک نمونه کد دیگه..
[HTMLS]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.txt{
background:#CCC;
border:none;
font:tahoma 8pt #666;
height:40px;
line-height:35px;
padding:0px;
padding-right:90px;
z-index:0;
}
.btn{
background:url(http://forum.majidonline.com/images/majidonline/search_btn.png);
border:none;
height:30px;
width:86px;
margin-left:-92px;
z-index:1;
}

</style>
</head>

<body>
<p>

<input type="text" class="txt" />
<input type="button" class="btn" />
</body>
</html>

[/HTMLS]
موفق باشید..