js+css圆形修边搜索框特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js+css圆形修边搜索框特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>js+css圆形修边搜索框</title>
<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>
<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>
</head>
<body>
<!--start header-->
<div style="margin:100px auto;">
  <div class="searchbox">
    <form name="cscsearch" action="#" method="get" id="cscsearch">
      <div class="l">
        <div class="m">
          <input name="q" type="text" class="searchkey " value="请输入您想要的作品..." onfocus="glb_searchTextOnfocus(this);"  onblur="glb_searchTextOnBlur(this);" maxlength="70" />
          <input type="submit" class="searchbut" value=""/>
        </div>
      </div>
    </form>
  </div>
</div>
<!--end header-->
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)