html - Search Focus and Out -
so making search bar , wondering how make when click in search bar shows different image , when click out goes old image
css
/***** search form *****/ #search-form { padding:45px 10px 0 0; float:right; } #search-form fieldset { position:relative; width:100%; display:block; overflow:hidden; } #search-form .search-field { float:right; width:300px; height:34px; background:url(../images/search-bg.jpg) 0 0 no-repeat; } #search-form input { width:245px; font-size:14px; line-height:1.25em; padding:9px 15px 9px; font-family:arial, helvetica, sans-serif; background:none; border:none; margin:0; outline:none; } #search-form .search-button { display:block; width:20px; height:21px; text-indent:-5000px; background:url(../images/search-icon.png) left top no-repeat; position:absolute; right:7px; top:7px; }
html
<form id="search-form" method="post" enctype="multipart/form-data"> <fieldset> <div class="search-field"> <input name="search" id="searchfieldbox" type="text" value="" onfocus="fieldswap('search-bg2.png')" > <a class="search-button" href="#" onclick="document.getelementbyid('search-form').submit()"></a> </div> </fieldset> </form>
now have edit make work
okay op, cleared previous declarations in css not interfere added css, here declarations removed:
#search-form input {background: none} , #search-form .search-field { background:url(../images/search-bg.jpg) 0 0 no-repeat; }
here updated jsfiddle -> http://jsfiddle.net/wxjgy/
Comments
Post a Comment