为了加快网友们的开发效率，今天分享一款现成的超酷的绿色搜索框js特效出来给大家使用，非常简洁大气，网友下载之后直接就可以拿来用，还可以自己扩展哦，使用非常简单，代码也非常简洁。
步骤如下：
1、js功能核心代码如下：
<script language="javascript" type="text/javascript">
function glb_searchTextOnfocus(obj) {
if (obj.value == '请输入您想要的作品...')
obj.value = '';
obj.style.color = '#333';
}
function glb_searchTextOnBlur(obj) {
if (obj.value == '') {
obj.value = '请输入您想要的作品...';
obj.style.color = '#98BC00';
} else {
obj.style.color = '#333';
}
}
</script>
2、css样式代码如下：
<style>
*{ margin:0; padding:0;}
body{ background:url(images/body_bg.png) repeat-y center 0px; min-width:970px;}
body,p,div,th,td,input,select,textarea,ul,li,a{ color:#333; font-size:12px;font-family:"宋体",Arial,Verdana; padding:0; margin:0;}
.searchbox{width:483px; height:58px; margin-left:448px; padding-top:14px;position:relative; z-index:99;}
.searchbox .l{ padding-left:36px; background:url(images/v5_main_img.png) no-repeat 0 -57px; height:58px;}
.searchbox .m{ background:url(images/v5_repeat_x.png) repeat-x 0 -123px; height:58px; }
.searchbox .m .searchkey{ outline:none; border:0; padding:16px 0; height:22px; line-height:22px; background:none; font-size:19px; font-weight:bold; color:#98bc00; width:290px; float:left;font-family: "microsoft yahei";}
.searchbox .m .searchcleanbut{background:url(images/filter_del.gif) no-repeat 0 20px; cursor:pointer; border:0; width:20px; height:58px; float:left;}
.searchbox .m .searchbut{background:url(images/v5_main_img.png) no-repeat 0 -115px; cursor:pointer; border:0; width:154px; height:58px; float:right;}
.searchbox .m .searchbutfocus{ background-position:-154px -115px;}
.searchbox{width:653px;}
.searchbox .m .searchkey{border:0; padding:18px 0; height:22px; line-height:22px; background:none; font-size:19px; font-weight:bold; color:#98BC00; width:460px; float:left;}
</style>
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
搜索框特效 实用特效 js特效 表单验证 button