纯css实现email输入框格式输入正确错误验证显示效果代码
代码语言:html
所属分类:验证
代码描述:纯css实现email输入框格式输入正确错误验证显示效果代码,输入错误格式边框为红色,正确格式边框为绿色。
代码标签: 纯 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0