html悬停文本框变色,js文本框聚焦边框变色

Insert title here

.fun {

margin: 0 auto;

width: 1000px;

overflow: hidden;

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

border: solid 1px #ccc;

font-family: Microsoft YaHei;

overflow: hidden;

}

.inputText {

border: solid 1px #ccc;

height: 40px;

width: 200px;

line-height: 40px/9;

padding: 0 2px;

box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);

margin: 10px 0;

outline: none;

font-family: arial;

font-weight: 700;

text-indent: 5px;

color: #1C1C1C;

display: inline-block;

}

.inputFocus {

border: solid 1px #1398FF;

box-shadow: 0 0 5px rgba(0, 192, 255, 0.4);

}

.text {

padding: 15px 0 15px 75px;

}

h1 {

text-align: center;

padding: 10px 0;

margin: 0;

background: -webkit-linear-gradient(#fcfcfc, #f9f9f9) repeat;

background: -moz-linear-gradient(#fcfcfc, #f9f9f9) repeat;

border-bottom: solid 1px #ccc;

font-weight: 400;

text-shadow: 1px 1px 3px #fff;

}

// JavaScript Document

$(document).ready(function() {

function input() {

//each遍历文本框

$(".inputText").each(function() {

// 保存当前文本框的值

var $val = this.value;

$(this).focus(function() {

// 获得焦点时，如果值为默认值，则清空文本框的值

if (this.value == $val) {

this.value = "";

// alert(this.className);

this.className = "inputText inputFocus";

}

});

$(this).blur(function() {

// 失去焦点时，如果值为空，则重新加上文本框默认值

if (this.value == "" || this.value == $val) {

this.value = $val;

this.className = "inputText";

}

});

});

}

input();

})

文本框聚焦清空默认值边框变色，离开焦点添加默认值

原文：http://www.cnblogs.com/feong/p/5250110.html