纯css实现email输入框格式输入正确错误验证显示效果代码-html代码-BFW代码库

纯css实现email输入框格式输入正确错误验证显示效果代码

代码语言：html

所属分类：验证

代码描述：纯css实现email输入框格式输入正确错误验证显示效果代码，输入错误格式边框为红色，正确格式边框为绿色。

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

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

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


  
  
<style>
@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

:root {
  --valid: hsl(140 80% 40%);
  --invalid: hsl(10 80% 40%);
  --input: hsl(0 0% 0%);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Geist Sans", "SF Pro", sans-serif;
  font-weight: 100;
  background-color: hsl(0 0% 6%);
  color: hsl(0 0% 98%);
}

.form-group {
  --active: 0;
  container-type: inline-size;
  flex: 1;
}

form {
  width: 40ch;
  display: flex;
}

input {
  --is-valid: 0;
  --is-invalid: 0;
  border: 0;
  background:
    linear-gradient(var(--input), var(--input)) padding-box,
    linear-gradient(var(--invalid), var(--invalid)) calc((1 - var(--is-invalid)) * -100cqi) 0 / 100% 100% border-box,
    linear-gradient(var(--valid), var(--valid)) calc((1 - var(--is-valid)) * 100cqi) 0 / 100% 100% border-box,
    var(--input);
  border: 2px solid transparent;
  font-size: 2rem;
  padding: 1rem 2rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
/*   background-position:
    0 0,
    calc((1 - var(--is-invalid)) * -100cqi) 0,
    calc((1 - var(--is-valid)) * 100cqi) 0,
    0 0; */
  max-width: 100%;
  width.........完整代码请登录后点击上方下载按钮下载查看