HTMLElement web Components实现密码强度输入检测效果代码-html代码-BFW代码库

HTMLElement web Components实现密码强度输入检测效果代码

代码语言：html

所属分类：其他

代码描述：HTMLElement web Components实现密码强度输入检测效果代码

代码标签： HTMLElement web Components 密码强度输入检测

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
.password-rules__meter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-inline-size: 10rem;
}

.password-rules__meter > :where(span) {
  width: 100%;
  height: 0.25em;
  background-color: lightgray;
  border-radius: 360px;
  transition: background-color 100ms ease-out;
}

password-rules[data-score="1"] .password-rules__meter :first-child,
password-rules[data-score="2"] .password-rules__meter :nth-child(-n + 2),
password-rules[data-score="3"] .password-rules__meter :nth-child(-n + 3),
password-rules[data-score="4"] .password-rules__meter :nth-child(-n + 4) {
  background-color: dodgerblue;
}

password-rules[data-score="5"] .password-rules__meter :nth-child(-n + 5) {
  background-color: mediumseagreen;
}

.password-rules__score::before {
  display: block;
  counter-reset: score var(--score, 0) total var(--total, 5);
  content: counter(score) "/" counter(total);
  font-feature-settings: "tnum";
  font-size: 0.8em;
}

.password-rules__checklist {
  --flow: 0.3rem;
  -webkit-padding-start: 1.2em;
          padding-inline-start: 1.2em;
}

.password-rules__checklist li {
  position: relative;
  list-style-type: circle;
}

.password-rules__checklist .is-match::before {
  content: "✅".........完整代码请登录后点击上方下载按钮下载查看