繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:制作对用户友好的站内搜索表单
- CSS样式表
- CSS+DIV 拼图(26个英文字母)
- css 模拟表格斜线
- hr 样式实现1px直线
- css 画的百度LOGO
- css 文字上右下环绕广告的写法
- CSS 实现未知内容高度的垂直水平居中(改良版)
- input 按钮显示差异的解决方法
- css 限定GridView宽度并加上滚动条
- ie6 position-fixed效果
- css 书写技巧 CSS 技巧教程
- IE和FireFox JavaScript的函数名的作用域的异同
- 纯CSS 级联菜单实现代码
- CSS 清除网页浮动 经验
- id与class的使用原则 网页制作经验
- CSS expression判断表达式设置input样式
- 应用IE6所不支持的CSS的type选择器
- CSS 网页内容换行控制
- DIV+CSS 网页布局心得
- CSS 教程之内容设置的一些语法
- 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
CSS样式表 中的 CSS教程:制作对用户友好的站内搜索表单
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 110 ::
收藏到网摘: n/a
站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行“加工”，让它在各种环境下都显示一致的效果，而且还给访问者提示。
搜索功能的 XHTML 代码一般如下：
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="keyword" id="keyword" />
</label>
<label>
<input type="submit" name="put-in" id="put-in" value="搜索" />
</label>
</form>
<label>
<input type="text" name="keyword" id="keyword" />
</label>
<label>
<input type="submit" name="put-in" id="put-in" value="搜索" />
</label>
</form>
默认情况下，在各个浏览中的效果如下图：
给它加上样式：
*{
margin:0;
padding:0;
}
form{
position:relative;
margin:20px;
}
input{
position:absolute;
border:1px solid #00CCFF;
background:#fff;
}
#keyword{
width:150px;
height:24px;
padding-left:2px;
line-height:24px;
color:#bbb;
}
#put-in{
width:50px;
height:26px;
left:150px;
}
margin:0;
padding:0;
}
form{
position:relative;
margin:20px;
}
input{
position:absolute;
border:1px solid #00CCFF;
background:#fff;
}
#keyword{
width:150px;
height:24px;
padding-left:2px;
line-height:24px;
color:#bbb;
}
#put-in{
width:50px;
height:26px;
left:150px;
}
加上样式之后，在各个浏览器中的效果都如下图：
我们再给它添加提示：在 XHTML 代码中，给文本框加上默认的文字 value="请输入关键字" ，然后再加上 javascript 代码，使用户用鼠标点击文本框时，默认的文本消失，能够直接输入关键字。
javascript代码：
window.onload = function(){
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}
相关解释：
onfocus —— 元素聚焦时触发的事件
onblur —— 元素失去焦点时触发的事件
评论 (0) All
