26 数字验证

效果演示

实现了一个简单的数字密码输入表单，用户需要输入一个4位数字密码来验证身份。表单包含一个标题、描述、输入字段、两个按钮和一个关闭按钮。输入字段是一个4位数字密码，用户需要在每个输入框中输入数字来输入密码。两个按钮分别是“验证”和“清除”，用户可以点击这两个按钮来进行验证和清除操作。关闭按钮用于关闭表单。整个表单的样式和布局都比较简洁明了，适合在需要输入密码的场景中使用。

Code

<form class="form">
  <span class="close">X</span>

  <div class="info">
    <span class="title">Two-Factor Verification</span>
    <p class="description">Enter the two-factor authentication code provided by the authenticator app </p>
  </div>
  <div class="input-fields">
    <input maxlength="1" type="tel" placeholder="">
    <input maxlength="1" type="tel" placeholder="">
    <input maxlength="1" type="tel" placeholder="">
    <input maxlength="1" type="tel" placeholder="">
  </div>

  <div class="action-btns">
    <a href="#" class="verify">Verify</a>
    <a href="#" class="clear">Clear</a>
  </div>

</form>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.form {
    --black: #000000;
    --ch-black: #141414;
    --eer-black: #1b1b1b;
    --night-rider: #2e2e2e;
    --white: #ffffff;
    --af-white: #f3f3f3;
    --ch-white: #e1e1e1;
    --tomato: #fa5656;
    font-family: Helvetica, sans-serif;
    padding: 25px;
    display: flex;
    max-width: 420px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    color: var(--af-white);
    background-color: var(--black);
    border-radius: 8px;
    position: relative;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
}

/*----heading and description-----*/

.info {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title {
    font-size: 1.5rem;
    font-weight: 900;
}

.description {
    margin-top: 10px;
    font-size: 1rem;
}

/*----input-fields------*/

.form .input-fields {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.form .input-fields input {
    height: 2.5em;
    width: 2.5em;
    outline: none;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.5rem;
    color: var(--af-white);
    border-radius: 5px;
    border: 2.5px solid var(--eer-black);
    background-color: var(--eer-black);
}

.form .input-fields input:focus {
    border: 1px solid var(--af-white);
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .15);
    transform: scale(1.05);
    transition: 0.5s;
}

/*-----verify and clear buttons-----*/

.action-btns {
    display: flex;
    margin-top: 20px;
    gap: 0.5rem;
}

.verify {
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--night-rider);
    text-shadow: none;
    background: var(--af-white);
    box-shadow: transparent;
    border: 1px solid var(--af-white);
    transition: 0.3s ease;
    user-select: none;
}

.verify:hover,
.verify:focus {
    color: var(--night-rider);
    background: var(--white);
}

.clear {
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ch-white);
    text-shadow: none;
    background: transparent;
    border: 1px solid var(--ch-white);
    transition: 0.3s ease;
    user-select: none;
}

.clear:hover,
.clear:focus {
    color: var(--tomato);
    background-color: transparent;
    border: 1px solid var(--tomato);
}

/*-----close button------*/

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: var(--night-rider);
    color: var(--ch-white);
    height: 30px;
    width: 30px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: .5s ease;
}

.close:hover {
    background-color: var(--tomato);
    color: var(--white);
}

实现思路拆分

cbody {
  height: 100vh; /* 设置整个页面的高度为视口高度 */
  display: flex; /* 设置元素为flex布局 */
  justify-content: center; /* 设置主轴方向上的对齐方式为居中对齐 */
  align-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
  background-color: #e8e8e8; /* 设置背景颜色为浅灰色 */
}

这段代码设置了整个页面的样式，包括高度、布局方式、对齐方式和背景颜色。

.form {
  --black: #000000; /* 设置黑色变量 */
  --ch-black: #141414; /* 设置深灰色变量 */
  --eer-black: #1b1b1b; /* 设置中灰色变量 */
  --night-rider: #2e2e2e; /* 设置深黑色变量 */
  --white: #ffffff; /* 设置白色变量 */
  --af-white: #f3f3f3; /* 设置亮白色变量 */
  --ch-white: #e1e1e1; /* 设置中白色变量 */
  --tomato: #fa5656; /* 设置番茄红色变量 */
  font-family: Helvetica, sans-serif; /* 设置字体 */
  padding: 25px; /* 设置内边距 */
  display: flex; /* 设置元素为flex布局 */
  max-width: 420px; /* 设置最大宽度为420px */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
  align-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
  overflow: hidden; /* 设置内容溢出时隐藏滚动条 */
  color: var(--af-white); /* 设置文本颜色为亮白色 */
  background-color: var(--black); /* 设置背景颜色为黑色 */
  border-radius: 8px; /* 设置圆角半径为8px */
  position: relative; /* 设置元素为相对定位 */
  box-shadow: 10px 10px 10px rgba(0, 0, 0,.1); /* 设置阴影效果 */
}

这段代码设置了表单的样式，包括变量、字体、内边距、布局方式、对齐方式、溢出处理、文本颜色、背景颜色、圆角半径、定位和阴影效果。

.info {
  margin-bottom: 20px; /* 设置下边距为20px */
  display: flex; /* 设置元素为flex布局 */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
  align-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
  text-align: center; /* 设置文本对齐方式为居中对齐 */
}

这段代码设置了标题和描述的样式，包括下边距、布局方式、对齐方式和文本对齐方式。

.title {
  font-size: 1.5rem; /* 设置字体大小为1.5rem */
  font-weight: 900; /* 设置字体粗细为900 */
}

这段代码设置了标题的样式，包括字体大小和字体粗细。

.description {
  margin-top: 10px; /* 设置上边距为10px */
  font-size: 1rem; /* 设置字体大小为1rem */
}

这段代码设置了描述的样式，包括上边距和字体大小。

.form.input-fields {
  display: flex; /* 设置元素为flex布局 */
  justify-content: space-between; /* 设置主轴方向上的对齐方式为两端对齐 */
  gap: 10px; /* 设置两个输入框之间的间距为10px */
}

这段代码设置了输入框的样式，包括布局方式、对齐方式和间距。

.form.input-fields input {
  height: 2.5em; /* 设置输入框高度为2.5em */
  width: 2.5em; /* 设置输入框宽度为2.5em */
  outline: none; /* 去掉输入框的外边框 */
  text-align: center; /* 设置文本对齐方式为居中对齐 */
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /* 设置字体 */
  font-size: 1.5rem; /* 设置字体大小为1.5rem */
  color: var(--af-white); /* 设置文本颜色为亮白色 */
  border-radius: 5px; /* 设置圆角半径为5px */
  border: 2.5px solid var(--eer-black); /* 设置输入框的边框为2.5px的黑色实线 */
  background-color: var(--eer-black); /* 设置输入框的背景颜色为黑色 */
}

这段代码设置了输入框的样式，包括高度、宽度、外边框、文本对齐方式、字体、字体大小、文本颜色、圆角半径、边框和背景颜色。

.form.input-fields input:focus {
  border: 1px solid var(--af-white); /* 设置输入框获得焦点时的边框为1px的亮白色实线 */
  box-shadow: inset 10px 10px 10px rgba(0, 0, 0,.15); /* 设置输入框获得焦点时的阴影效果 */
  transform: scale(1.05); /* 放大输入框 */
  transition: 0.5s; /* 设置过渡效果持续时间为0.5s */
}

这段代码设置了输入框获得焦点时的样式，包括边框、阴影效果、放大效果和过渡效果。

.action-btns {
  display: flex; /* 设置元素为flex布局 */
  margin-top: 20px; /* 设置上边距为20px */
  gap: 0.5rem; /* 设置两个按钮之间的间距为0.5rem */
}

这段代码设置了按钮的样式，包括布局方式、上边距和间距。

.verify {
  padding: 10px 20px; /* 设置按钮的内边距为10px 20px */
  text-decoration: none; /* 去掉链接的下划线 */
  border-radius: 5px; /* 设置按钮的圆角半径为5px */
  font-size: 1rem; /* 设置字体大小为1rem */
  font-weight: 500; /* 设置字体粗细为500 */
  color: var(--night-rider); /* 设置文本颜色为深黑色 */
  text-shadow: none; /* 去掉文本阴影 */
  background: var(--af-white); /* 设置按钮的背景颜色为亮白色 */
  box-shadow: transparent; /* 去掉按钮的阴影 */
  border: 1px solid var(--af-white); /* 设置按钮的边框为1px的亮白色实线 */
  transition: 0.3s ease; /* 设置过渡效果 */
  user-select: none; /* 禁止用户选择按钮文本 */
}

这段代码设置了“验证”按钮的样式，包括内边距、文本装饰、圆角半径、字体大小、字体粗细、文本颜色、文本阴影、背景颜色、阴影、边框、过渡效果和用户选择。

.verify:hover,
.verify:focus {
  color: var(--night-rider); /* 设置文本颜色为深黑色 */
  background: var(--white); /* 设置按钮的背景颜色为白色 */
  border: 1px solid var(--af-white); /* 设置按钮的边框为1px的亮白色实线 */
}

这段代码设置了“验证”按钮在鼠标悬停或获得焦点时的样式，包括文本颜色、背景颜色和边框。

.clear {
  padding: 10px 20px; /* 设置内边距为上下各10px，左右各20px */
  text-decoration: none; /* 去除文本装饰 */
  border-radius: 5px; /* 设置圆角半径为5px */
  font-size: 1rem; /* 设置字体大小为1rem */
  font-weight: 500; /* 设置字体粗细为500 */
  color: var(--ch-white); /* 设置文本颜色为中白色 */
  text-shadow: none; /* 去除文本阴影 */
  background: transparent; /* 去除背景 */
  border: 1px solid var(--ch-white); /* 设置边框为1px粗中白色 */
  transition: 0.3s ease; /* 设置过渡效果 */
  user-select: none; /* 禁止用户选择文本 */
}

这段代码设置了清除按钮的样式，包括内边距、圆角半径、字体大小、字体粗细、文本颜色、文本阴影、背景、边框和过渡效果等。

.clear:hover,
.clear:focus {
  color: var(--tomato); /* 设置文本颜色为番茄红色 */
  background-color: transparent; /* 去除背景颜色 */
  border: 1px solid var(--tomato); /* 设置边框为1px粗番茄红色 */
}

这段代码设置了清除按钮在鼠标悬停或获得焦点时的样式，包括文本颜色、背景颜色和边框颜色等。

.close {
  position: absolute; /* 设置元素为绝对定位 */
  right: 10px; /* 设置右边距为10px */
  top: 10px; /* 设置上边距为10px */
  background-color: var(--night-rider); /* 设置背景颜色为深黑色 */
  color: var(--ch-white); /* 设置文本颜色为中白色 */
  height: 30px; /* 设置高度为30px */
  width: 30px; /* 设置宽度为30px */
  display: grid; /* 设置元素为网格布局 */
  place-items: center; /* 设置交叉轴方向上的对齐方式为居中对齐 */
  border-radius: 5px; /* 设置圆角半径为5px */
  cursor: pointer; /* 设置鼠标指针为指针 */
  font-weight: 600; /* 设置字体粗细为600 */
  transition:.5s ease; /* 设置过渡效果 */
}

这段代码设置了关闭按钮的样式，包括位置、大小、背景颜色、文本颜色、圆角半径、鼠标指针、字体粗细和过渡效果等。

.close:hover {
  background-color: var(--tomato); /* 设置背景颜色为番茄红色 */
  color: var(--white); /* 设置文本颜色为白色 */
}

这段代码设置了关闭按钮在鼠标悬停时的样式，包括背景颜色和文本颜色等。