vue input密码输入强度检测效果代码
代码语言:html
所属分类:表单美化
代码描述:vue input密码输入强度检测效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; padding: 0; margin: 0; } body { font-family: 'Montserrat', sans-serif; line-height: 1.5; letter-spacing: 1px; } input[type="password"]::-webkit-input-placeholder { color: rgba(71, 87, 98, 0.8); } input[type="password"]::input-placeholder { color: rgba(71, 87, 98, 0.8); } #app { width: 350px; height: auto; padding: 10px; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #app h2 { font-size: 25px; color: #475762; text-align: center; margin-bottom: 20px; } .input_container { display: block; margin: 0 auto; width: 320px; height: auto; position: relative; border-radius: 4px; overflow: hidden; margin-bottom: 10px; } #app input[type="password"] { width: 320px; height: auto; border: 1px solid transparent; background: #EEEEEE; color: #475762; font-size: 15px; border-radius: 4px; padding: 12px 5px; overflow: hidden; outline: none; -webkit-transition: all .1s; transition: all .1s; } #app input[type="password"]:focus { border: 1px solid #2196F3; } .password_length { padding: 2px 10px; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #FBD490; color: rgba(71, 87, 98, 0.8); border-radius: 4px; font-size: 13px; display: none; -webkit-transition: all .1s; transition: all .1s; } .valid_password_length { background: #00AD7C; color: rgba(255, 255, 255, 0.9); } .show_password_length { display: block; } .lnu_container { display: block; margin: 10px auto; width: 320px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .lnu_container p { width: 100px; height: auto; font-size: 12px; line-height: 1.2; text-align: center; border-radius: 2px; color: rgba(71, 87, 98, 0.8); background: -webkit-linear-gradient(left, #00AD7C 50%, #eee 50%); background: linear-gradient(toright, #00AD7C 50%, #eee 50%); background-size: 201% 100%; background-position: right; -webkit-transition: background .3s; transition: background .3s; } .lovercase_valid, .number_valid, .uppercase_valid { background-position: left !important; color: rgba(255, 255, 255, 0.9) !important; } .valid_password_container { display: block; margin: 10px auto; border-radius: 4px; position: relative; background: #00AD7C; width: 20px; height: 20px; visibility: hidden; opacity: 0; } .show_valid_password_container { visibil.........完整代码请登录后点击上方下载按钮下载查看
网友评论0