jquery密码输入强度实时检测提示代码
代码语言:html
所属分类:表单美化
代码描述:jquery密码输入强度实时检测提示代码
代码标签: jquery 密码 强度 实时 检测 提示 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.form-container {
display: block;
width: 500px;
margin: 60px auto;
text-align: left;
}
lable {
display: block;
position: relative;
text-transform: uppercase;
color: #aaa;
}
input[type='password'] {
width: 100%;
box-sizing: border-box;
height: 55px;
display: inline-block;
border: 3px solid #2F96EF;
border-radius: 5px;
padding: 0 15px;
margin: 10px 0;
-webkit-transition: .2s;
transition: .2s;
}
input[type='password']:focus {
outline: none;
-moz-outline: none;
-webkit-outline: none;
}
lable:before {
content: "\f070";
color: #aaa;
font-size: 22px;
font-family: FontAwesome;
position: absolute;
right: 25px;
top: 44px;
}
.progress-bar_wrap {
width: 300px;
height: 5px;
background: #F6F6FA;
display: inline-block;
vertical-align: middle;
overflow: hidden;
border-radius: 5px;
}
.form-1 .progress-bar_item {
display: inline-block;
height: 100%;
width: .........完整代码请登录后点击上方下载按钮下载查看
















网友评论0