ساخت باکس جستجو

[mojtabakhazaeli]

سلام من یک باکس جستجو دارم با این کد


<form method="get" id="searchform" action="<?php bloginfo('url');?>">
<div>
<input type="submit" id="searchsubmit" value="">
<input type="text" name="s" class="sinpu" value="جستجو کنید..."
onFocus=" this.value='';"
onBlur=" if(this.value=='') {this.value='جستجو کنید...';}"
>
</div>
</form>

میخوام وقتیsearchform# هاور میشه sinpu. این استایل رو به خودش یگیره


width:150px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;

و searchsubmit# این این استایل رو بگیره


background: url(image/searh.png) scroll center no-repeat #34495e;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;

و در حالت فکوس این همی یه این اتفاق ها تثبیت بشه و سایز ها رنگ ها تغییر نکنه
اما در حالت بلور بر گرده به حالت قبل
یعنی searchsubmit# این استایل رو بگیره


width: 50px;
height: 53px;
background: url(image/searh.png) scroll center no-repeat #d74b4b;
border: 1px solid #eeeeee;
border-right: none;
padding: 10px;
float: left;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;

و sinpu. این استایل رو بگیره


border: 1px solid #eeeeee;
border-left: none;
width: 3px;
height: 53px;
font-size: 16px;
font-family: 'BYekan';
background-color: #34495e;
color: #fff;
z-index: 10;
float: left;
padding-right: 5px;

میخوام بدونم با css میشه همچین کاری کرد ؟ اگر میشه چطور این کار رو انجام بدم ؟
و اگرر با جی کوئری میشه !چطور این کار رو انجام بدم ؟

[mohammad425]

با :hover و :focus به راحتی در css قابل انجامه دوست عزیز

[sinoser]

مورد دوم رو نفهمیدم منظورت چیه (شیرازی نیستم ولی حال ندارم تک تک استایل هاتو بخونم ببینم چی به چیه ساده توضیح میدادی دیگه:لبخند: )
مورد اول هم این جوری بنویس (مثلا واسه .sinpu ) :


#searchform:hover .sinpu{ width:150px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }