网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 表单按钮 >> 正文
最新文章
· 输入框输入提示代码
· 文本框提示代码
· 让表单ctrl加回车提交
· 简单代码实现JS多级Select联动菜单
· JS验证数字位数
· 带有介绍的Select列表菜单代码
· Js注册等待
· 点击按钮插入文字在文本框
· radio背景颜色选择器
· 表单内容提交等待效果
热门文章
 Js实现点击添加增加一行,点击删除
 DIV中实现input垂直居中
 常用的选择省份城市的联动下拉列表
 JS动态增加删除一组输入框
 jQuery实现Email邮箱地址自动补全代
 Select实现多选
 JS动态批量创建带表单文本框的表格
 JS实现上传本地图片前先预览
 日期选择下拉框
 漂亮的点击弹出的登陆框
相关文章
表单文本框得到和失去焦点的效果
应用方向键控制选择项目的文本框
表单文本框文字提示效果
点击将内容加入文本框
指定文本框输入长度并自动转跳到下一个文
文本框输入提示/自动完成的Js代码
Js模仿编辑器中适时改变文本框的大小,包
JS动态批量创建带表单文本框的表格行和列
只能输入大于等于0的整数的文本框
只能输入大于0的整数的文本框
简单实现文本框数值加1或减1
jquery实现文本框弹出热门标签的提示效果
显示在文本框里的Js打字效果代码
将文本框变为只读,禁止输入字符
简洁漂亮且附带提示的二级导航菜单
CSS实现虚线文本框效果
只能输入中文的文本框
只能输入数字和小数点的文本框
只能输入英文和数字的文本框
给文本框添加灰色提示文字
带提示的文本搜索框,仿Dell.com
来源:源码爱好者 更新时间:2011/12/25 12:33:44 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<title></title>
<style type="text/css">
.searchinput{
 border-right-width: 0px;
 padding-left: 3px;
 width: 168px;
 font-family: arial;
 float: left;
 border-top-width: 0px;
 border-bottom-width: 0px;
 color: #636365;
 margin-left: 4px;
 font-size: 8pt;
 vertical-align: middle;
 border-left-width: 0px;
 margin-right: 3px;
}
.tab_search{
 border-bottom: #cccccc 1px solid;
 border-left: #cccccc 1px solid;
 height: 25px;
 border-top: #cccccc 1px solid;
 border-right: #cccccc 1px solid;

}
.searchaction{
 width: 21px;
 float: left;
 height: 17px;
}
</style>
<form action="#" name="search">
<table border="0" cellpadding="0" cellspacing="0" class="tab_search">
 <tr>
  <td>
   <input type="text" name="q" title="Search" class="searchinput" id="searchinput" onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='- Search Products -';" onfocus="if(this.value=='- Search Products -')value='';" value="- Search Products -" size="10"/>
  </td>
  <td>
   <input type="image" width="21" height="17" class="searchaction" onclick="if(document.forms['search'].searchinput.value=='- Search Products -')document.forms['search'].searchinput.value='';" alt="Search" src="http://www.cwydesign.com/effects/UploadFiles_7074/201112/2011122512352465.gif" border="0" hspace="2"/>
  </td>
 </tr>
</table>
</form>

△运行 ☉预览 #复制 +收藏
特效说明:

  在Dell.com搜索框基础上加了点效果,即提示文字(--Search Products--)改为浅灰色,当鼠标点击文本框输入文字时,输入内容颜色自动转为黑色正文字颜色。这样做的好处是使提示文字和用户输入有效的区分,代码虽然简单,但对用户来说有着良好的用户体验。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号