css+js实现每个字符不能重复输入框提醒效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现每个字符不能重复输入框提醒效果代码,如果重复就会晃动提醒。
代码标签: css js 每个 字符 不能 重复 输入框 提醒
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap"); *, *::before, *::after { box-sizing: border-box; margin: 0; } body { background-color: #2a2a2a; background-image: url("//repo.bfw.wiki/bfwrepo/icon/62f4430a0ee3f.png"); } .container { display: grid; height: 100vh; place-items: center; font-size: 32px; } #inputTextBox { padding: 1em; font-size: clamp(1.5rem, 4vw, 3.5rem); width: 80vw; background-color: transparent; border: none; outline: 1px solid #444; color: #fcfcfc; box-shadow: 0.2em 0.2em 2em #0004; font-family: "Mouse Memoirs", sans-serif; } #inputTextBox.invalid { background-color: #FC424244; animation: shake 0.75s ease-in-out infinite; } @keyframes shake { 0%, 100% { transform: translate(0) rotate(0deg); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0