css+js实现可显示和隐藏密码输入框效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现可显示和隐藏密码输入框效果代码,点击右侧眼睛可隐藏和显示密码。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <style> :root { --primary: #03DAC6; --secondary: white; --background: #121212; --box-background: #1E1E1E; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; height: 100vh; background: var(--background); display: flex; justify-content: center; align-items: center; } .box { background: var( --box-background); padding: 1.5rem; max-width: fit-content; width: 100%; padding-top: 0.75rem; border-radius: 0.5rem; } .input__wrapper { position: relative; padding: 1rem 0 0; } .input__field { outline: 1.5px solid var( --secondary); font-size: 1rem; border-radius: 0.25rem; color: var(--secondary); padding: 0.5rem; border: none; padding-right: 2rem; background: transparent; transition: all 0.2s; } .input__field::placeholder { color: transparent; } .input__field:placeholder-shown ~.input__label { font-size: 1rem; cursor: text; color: var(--secondary); top: 1.5rem; } label, .input__field:focus~.input__label { position: absolute; top: 0.375rem; padding: 0 0.25rem; background-color: var( --box-background); display: block; font-size: 0.875rem; left: 0.5rem; color: var(--secondary); transition: 0.3s; } .input__field:focus~.input__label { color: var(--primary); } .input__field:focus { outline: 1.5px solid var(--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0