html文本框高亮,当前输入框高亮显示

输入框高亮

HTML

用户登录

用户名:

密码:

登录

CSS

.container {

width: 400px;

margin:0 auto;

background-color: rgb(254, 244, 235);

border: 1px solid orangered;

}

h2 {

//h2不应该设置width,一旦margin改变,h2就会超出父元素或留白

//width: 392px;

margin: 0;

color: orangered;

background-color: rgb(255, 235, 215);

padding: 3px;

border-bottom: 1px solid orangered;

}

.content {

width: 220px;

margin: 20px auto;

}

.f-origin {

background-color: rgb(255,253,236);

border-radius: 3px;

}

.login {

width: 87px;

background-color: orangered;

padding: 5px 30px;

border-radius: 3px;

border: none;

color: #ffffff;

margin-bottom: 10px;

text-align: center;

margin-left: 132px;

}

.f-text {

background-color: rgb(255,231,231);

}

JS

window.onload = function () {

var aInput = document.getElementsByTagName('input');

for (var i=0; i

aInput[i].onfocus = function () {

this.className = 'f-text';

}

aInput[i].onblur = function () {

this.className = 'f-origin';

}

}

}

onfocus当元素获得焦点时触发

onblur当元素失去焦点时触发

className用于js中改变类名, 在之前的实例中使样式为默认样式就应该用这个,一直知道这个属性,竟然没想到

在其他人的代码中, 用户名,密码以及登录按钮的HTML都是这样

用户名

按钮也是这样,只是type不同, 没有值也写在里面, 设置label宽度, 所以按钮与输入框左对齐, 循环所有tagName为input的元素, 当按钮元素获得焦点时也可以改变按钮的背景色