فعال شدن فیلد جستجو با انتخاب آیکن

[Mahnaz 5]

سرچی که داخل هدر این سایت هستش رو می خواستم. یا مثل سرچ ادمین بار وردپرس، که وقتی آیکن سرچ انتخاب بشه کادر جستجو فعال میشه و در غیر اینصورت غیر فعال هستش و فقط آیکن مربوط به جستجو دیده میشه.

لطفا راهنمایی کنید، مرسی.

[Farzad 3805]

برای انجامش می تونید هم از CSS استفاده کنید و هم از Jquery که CSS راحت تره.

وقتی المان انتخاب نشده، همچین استایلی رو داره :

.box {
background: url('images/search.png') no-repeat scroll 5px 6px transparent;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 10px 4px 28px;
}

و برای حالت انتخاب، باید width بزرگتر بشه و بک گراند هم تغییر کنه :

.box:focus {
background-color: #F9F9F9;
width: 196px;
}

[Mahnaz 5]

برای انجامش می تونید هم از CSS استفاده کنید و هم از Jquery که CSS راحت تره.

وقتی المان انتخاب نشده، همچین استایلی رو داره :

.box {
background: url('images/search.png') no-repeat scroll 5px 6px transparent;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 10px 4px 28px;
}

و برای حالت انتخاب، باید width بزرگتر بشه و بک گراند هم تغییر کنه :

.box:focus {
background-color: #F9F9F9;
width: 196px;
}

استایل دهی رو می تونم انجام بدم. Jquery رو توضیح بدید. مرسی