<!DOCTYPE html>
<html>
<head>
<title>表单美化</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
#input_name{
width:200px;
height:20px;
border-radius:2px;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border:1px solid #f0f0f0;
}
#input_name:focus{
width:200px;
transition:width 1s linear 0s;
border-color:1px solid #555;
outline:none;/*这个是去去除本省存在的边框颜色*/
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
line-height:20px;
position:relative;
padding-right:70px;
}
#input_name:required:valid{/*当输入有效的时候，触发*/
background: #fff url(images/valid.png) no-repeat 98% center;box-shadow: 0 0 5px #5cd053;border-color: #28921f;
}
#input_name:focus:invalid {background: #fff url(images/invalid.png) no-repeat 98% center;box-shadow: 0 0 5px #d45252;border-color: #b03535;}/*当输入无效的时候，不触发*/
#input_name:required:valid + .input_text{
background-color:green;
}
#input_name:focus + .input_text{
display:inline-block;
color:"#fff";
text-align:center;
}
.input_text {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999;
position: absolute;
display: none;
}
.input_text::before {
content: "\25C0";/*带小箭头的*/
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
#input_name:focus + .input_text {display: inline;}
#input_name:required:valid + .input_text {background: #28921f;}
#input_name:required:valid + .input_text::before {color:#28921f;}
</style>
<script type="text/javascript">
$(function(){
$("#input_name").bind("blur",function(){
var value_valid=this.value;
if(value_valid.length<6)
{
this.value="";
}
else if(value_valid.length>18)
{
this.value="";
}
else if(((value_valid.substring(0,1)>='a')&&(value_valid.substring(0,1)<='z'))||((value_valid.substring(0,1)>='A')&&(value_valid.substring(0,1)<='Z')))
{
return
}
else
{
this.value="";
}
})
})
</script>
</head>
<body>
<div class="form_table">
<form action="" method="" id="frmV">
<ul>
<span>姓名</span>
<input type="text" id="input_name" required placeholder="name" name="username" value=""/><!---->
<span class="input_text">正确格式为：6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
</ul>
</form>
</div>
</body>
</html>
显示箭头
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
//这段话表示javascript:;防止产生链接
