您的位置：首页 > Web前端 > JavaScript

JavaScript DOM 制作搜索框，outline 去掉文本框获取焦点时候的颜色

2016-06-16 13:24 369 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {
background-color: #F7F7F7;
font-family: "Courier New", Courier, monospace;
}
.wrap {
width: 70%;
height: 500px;
margin: 0 auto;
}
.search_ss1{
margin-top:70px;
}
.search1{
width:500px;
height:30px;
border:1px solid #E7ECF0;
}
.search2{
width:110px;
height:34px;
background-color:#4478CE;
border:1px solid #4478CE;
color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:18px;
margin-top:70px;
}
.search1:focus{
outline:none;
}
</style>
<script>
function textlength()
{
var keyword=document.getElementById("product");
if(keyword.value==keyword.defaultValue)
{
keyword=null;
}
else
{
keyword.defaultValue="";
}

}

</script>
</head>

<body>
<div class="wrap">
<form id="formsearch" name="form1" method="post" action="123.asp">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div class="search_ss1">
<input id="product" name="keyword" type="text" class="search1" value="请输入您要搜索的产品关键词" onpropertychange="textlength()" oninput="textlength()" autocomplete="off" />
</div>
</td>
<td><input type="submit" value="搜索" class="search2" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航