动态的input框特效

动态input框特效

jsp:

	<input type="text" placeholder="请输入关键字" name="title" id="title"  TYPE="text" SIZE="29" style="width: 291px;" />

css:

	 #title {
			width:30%;
			height:40px;
			border:1px solid #dbdbdb;
			outline:none;
			font-size:20px;
			text-indent:10px;
		}
label {
		position:relative;
		width:291px;
		margin:10px auto;
		display:inline-block;
	} 
	label:after {
		content:"";
		display:inline-block;
		width:0;
		height:2px;
		background:red;
		transition:width 1s;
		position:absolute;
		bottom:1px;
		left:1px;
	}
	.active:after {
		width:calc(100% - 2px)
	}

js

	 $("input").focus(function() {
		       $(this).parent("label").addClass("active");
		   });
		   $("input").blur(function() {
		       if ($(this).val() == "") {
		           $(this).parent("label").removeClass("active");
		       }
		   });