js+css实现分体式自聚焦验证码输入框代码-html代码-BFW代码库

js+css实现分体式自聚焦验证码输入框代码

代码语言：html

代码描述：js+css实现分体式自聚焦验证码输入框代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
  --bg: rgb(60, 55, 61);
  --inputBG: rgba(255,255,255,0.25);
  --primary: rgba(99, 238, 219, 0.7);
  --focus: rgba(255,255,255,0.05);
}

* {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--bg);
}

main {
  display: flex;
  gap: 0.75rem;

  & input {
    width: 3.5rem;
    font: 1rem/3.5 helvetica,sans-serif;
    color: white;
    background-color: var(--inputBG);
    text-align: center;
    border: none;
    border-radius: 0.5rem;
    outline: none;
    transition: background-color 0.25s, transform 0.25s;

    &:hover, &:focus {
      border: 2px solid var(--primary);
    }

    &:focus {
      background-color: var(--focus);
      transform: scale(1.1);
    }
  }
}
</style>

</head>
<body>

<main>
  <input type='text' data-index='0' maxlength='1' autofocus>
  <input type='text' data-index='.........完整代码请登录后点击上方下载按钮下载查看