本文介绍了一种使用HTML和JavaScript结合的方式来自定义输入框的样式变化效果。当鼠标悬停或获得焦点时，输入框边框颜色变为红色；失去焦点或鼠标移出时，若未获得焦点则恢复默认边框颜色。此方法适用于网页表单元素的美化。
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<style> input {border:#565656 1px solid;height:20px;line-height:19px;vertical-align:middle;font-size:12px;color:#565656;}
</style>
<script>
function fEvent(sType,oInput){
switch (sType){
case "focus" :
oInput.isfocus = true;
case "mouseover" :
oInput.style.borderColor = '#f00';
break;
case "blur" :
oInput.isfocus = false;
case "mouseout" :
if(!oInput.isfocus){
oInput.style.borderColor='#565656';
}
break;
}
}
</script>
<form name="form1" method="post" action="search.asp" target="_blank">
搜索：<br/>
名称：
<input type="text" name="name" onmouseover="fEvent('mouseover',this)" onfocus="fEvent('focus',this)" onblur="fEvent('blur',this)" onmouseout="fEvent('mouseout',this)"><br/>
编号：
<input type="text" name="num" onmouseover="fEvent('mouseover',this)" onfocus="fEvent('focus',this)" onblur="fEvent('blur',this)" onmouseout="fEvent('mouseout',this)"><br/>
<br/>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
