Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	font-size:14px;
	font-family:"微软雅黑";
	color:#333;
}
.wrap {
	width:640px;
	height:320px;
	margin:50px auto;
}
.wrap .wrap_Iten {
	position:relative;
	margin:20px auto;
}
.item_tip {
	background-color:#fff;
	color:#999;
	font-size:12px;
	left:12px;
	padding:0 3px;
	position:absolute;
	top:10px;
	transition:all .2s linear 0s;
}
.form_input {
	border:1px solid #dcdcdc;
	border-radius:5px;
	font-size:12px;
	padding:9px 10px;
	transition:border-color .15s ease-in-out 0s;
	width:278px;
	outline:none;
}
.item_tip_focus {
	color:#5188a6;
	font-size:12px;
	top:-8px;
}
.form_input-focus {
	border-color:#5188a6;
	outline:0 auto;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.1
 立即下载

表单提示美化效果代码实例

点击提示文本后面的空白部分,提示文本会上浮。

0