رفتن به مطلب

ساخت فیلد جستجو


پست های پیشنهاد شده

با سلام و خسته نباشید

میخوام فیلد جستجو را مانند شکل زیر درست کنم اگه امکان داره راهنمایی کنید ممنون

post-529-0-85418700-1360340764_thumb.jpg

لینک به ارسال

میشه دقیق بفرمایید؟ چون این مثل باکس جستجوی دیفالت وردپرسه

یه باکسه که توش عکس ذربین هستش با تایپ تو باکس و کلیک رو عکس سرچ انجام میشه

فقط میخوام اون عکس ذربین داخل باکس باشه شکل ظاهرش مثل همین عکس باشه

لینک به ارسال

http://css-tricks.com/webkit-html5-search-inputs

این فقط مشکلش اینه که برای سرچ باید اینتر بزنی من میخوام بعد از نوشتن کلمه مورد نظر روی ذربین کلیک کنی و سرچ بشه

لینک به ارسال

روش کار اینه:

یک فرم معمولی با دکمه ایجاد کنید.

بعد برای دکمه از عکس یا بکگراند عکس استفاده کنید.

بعد با matgin منفی دکمه رو روی فیل جستجو بیارید.

کار آسونی هست.

لینک به ارسال

روش کار اینه:

یک فرم معمولی با دکمه ایجاد کنید.

بعد برای دکمه از عکس یا بکگراند عکس استفاده کنید.

بعد با matgin منفی دکمه رو روی فیل جستجو بیارید.

کار آسونی هست.

این کار را انجام دادم ولی یه مشکلی پیش میاد من واسه input کلاس تعریف کردم که برای قسمت نظرات ولی تو این هم همون کلاس را نشون میده

چیکار کنم واسه این نیاد اگه این مشکل حل بشه اونم درست میشه ممنون


input, button, textarea, option, select{
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
padding: 2px;
border: 1px solid #DDDDDD;
border-radius: 2px;
color: #666666;
-moz-transition: all 0.3s linear 0s;
background: #E8E8E8;
margin: 2px;
border-right: 5px solid #ccc;
focus:outline:none,
}

ویرایش شده توسط YOU
لینک به ارسال

کلاس را درست کردم

تکمیل شد

ممنون


#searchform { background:#F8F8F8; width:180px; border:1px solid #D9D9D9; padding:-1px; overflow:hidden; }
#searchform #s { background:none; border:none; color:#777;font-family:'tahoma'; font-style:italic; width:162px;height:16px; float:right; }
#searchform #s:focus { outline:none; }
#search-button{ width:16px; height:16px; float:left; }

ویرایش شده توسط YOU
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...