html搜索框上标点上去变颜色,[转载]input搜索框鼠标放上或划过表单边框变色

input搜索框鼠标放上或划过表单边框变色

代码:

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;

;

无标题文档

.input_on{

border:2px solid red;

}

.input_off{

border:1px solid #999;

}

.input_move{

border:2px solid red;

}

cellpadding="0" cellspacing="0">

class="input_out" type="text"

οnfοcus="this.className='input_on';this.οnmοuseοut=''"

οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

οnmοusemοve="this.className='input_move'"

οnmοuseοut="this.className='input_out'"

/>

class="input_out" type="text"

οnfοcus="this.className='input_on';this.οnmοuseοut=''"

οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

οnmοusemοve="this.className='input_move'"

οnmοuseοut="this.className='input_out'"

/>

class="input_out" type="text"

οnfοcus="this.className='input_on';this.οnmοuseοut=''"

οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"

οnmοusemοve="this.className='input_move'"

οnmοuseοut="this.className='input_out'"

/>

执行结果:

a4c26d1e5885305701be709a3d33442f.png

另一种方法:(点击之后边框变为红色,鼠标滑过没有效果):

function ofocus(Obj){

Obj.style.border='solid 2px red';

}

function oblur(Obj){

Obj.style.border='solid 1px #999';

}

οnfοcus="ofocus(this)" οnblur="oblur(this)" />

οnfοcus="ofocus(this)" οnblur="oblur(this)" />

οnfοcus="ofocus(this)" οnblur="oblur(this)" />

执行结果:

a4c26d1e5885305701be709a3d33442f.png