具体实现代码如下:
创新互联-专业网站定制、快速模板网站建设、高性价比玉林网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式玉林网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖玉林地区。费用合理售后完善,10年实体公司更值得信赖。
var inputO = document.getElementById("input1");
inputO.onblur = function()
{
inputO.style.border = "1px solid rgb(0, 0, 0)";//input失去焦点时的边框状态
}
inputO.onfocus = function()
{
inputO.style.border = 0; //input得到焦点时的边框状态
}
orz....
你应该设置
input{XXXX}
而不是text,,,TEXT只是这个INPUT的类型而已。
分析问题:
文本框获取焦点时,浏览器给采用默认的处理方式,为其加上高亮外边框。
解决思路:
我们可能通过,在input获取焦点时,采用css将文本框的外边框去掉。为文本框添加如下样式即可。
outline:none;
样式代码:
input:focus {outline:none;}
下面给出一个完成的示例代码:
html
head
style
form{background-color : #FF00F1F;height:50px;padding : 15px;}
.inputStyle, .inputStyle:focus {outline:none;}
/style
/head
body
div id="dh2"
form
input type="text" class="inputStyle"/
input type="text" /
/form
/div
/body
/html
css里面有个伪类,:hover 你可以设置文本框的这个样式的文本颜色,那么当鼠标移动到文本框的时候,文本颜色就变成你设置的颜色
如果你不想要白边,就把 border: solid 1px #cacaca;去掉,ie和火狐的处理边框是不一样的,ie把边框放到文本框的外面,火狐是放到文本框的里面
中文字符的中线和英文字符的中线定义是不一样的,你在设置输入框与文本居中对齐的时候,最好将文本的字体样式设置成英文字体,比如font-family:verdana;这样有助于解决中线问题。然后再给输入框添加 vertical-align:middle;样式。
注意,由于涉及到中线问题,所以字号会影响对齐的效果。例子就不举了,你可以改变字号(12px、13px等)自己尝试一下。