本文介绍了一个简单的网页搜索框实现方案，利用CSS进行样式设计，并通过jQuery实现了输入提示及焦点效果。文章详细展示了如何使用内联样式和脚本语言完成交互设计。
<style type="text/css">
*{
margin:0;
padding: 0;
}
#search{
width: 228px;
height: 22px;
background:pink;
margin:100px auto;
}
#search input{
width: 192px;
height: 22px;
background:url(img/1.png) no-repeat;
border: 0 none;
outline: none;
padding-left: 8px;
color: #ccc;
}
#search button{
width: 28px;
height: 22px;
float: right;
background:url(img/3.png);
border: 0 none;
padding: 0;
}
</style>
</head>
<body>
<div id="search">
<input id="ii" type="text" value="请输入。。。" /><button></button>
</div>
<script type="text/javascript">
$(function(){
$("#ii").focus(function(){
if($(this).val() =="请输入。。。" ){
$(this).val("");
$(this).css("color","#000");
}
});
$("#ii").blur(function(){
if($(this).val() =="" ){
$(this).val("请输入。。。");
$(this).css("color","#ccc");
}
});
})
</script>
</body>
</html>
*{
margin:0;
padding: 0;
}
#search{
width: 228px;
height: 22px;
background:pink;
margin:100px auto;
}
#search input{
width: 192px;
height: 22px;
background:url(img/1.png) no-repeat;
border: 0 none;
outline: none;
padding-left: 8px;
color: #ccc;
}
#search button{
width: 28px;
height: 22px;
float: right;
background:url(img/3.png);
border: 0 none;
padding: 0;
}
</style>
</head>
<body>
<div id="search">
<input id="ii" type="text" value="请输入。。。" /><button></button>
</div>
<script type="text/javascript">
$(function(){
$("#ii").focus(function(){
if($(this).val() =="请输入。。。" ){
$(this).val("");
$(this).css("color","#000");
}
});
$("#ii").blur(function(){
if($(this).val() =="" ){
$(this).val("请输入。。。");
$(this).css("color","#ccc");
}
});
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
