css实现input输入框占位符聚焦上移效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现input输入框占位符聚焦上移效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #f5f5f5; } .form-wrapper { max-width: 30%; min-width: 300px; padding: 50px 30px 50px 30px; margin: 50px auto; background-color: #ffffff; border-radius: 5px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); } .form-group { position: relative; } .form-group + .form-group { margin-top: 30px; } .form-label { position: absolute; left: 0; top: 10px; color: #999; background-color: #fff; z-index: 10; transition: transform 150ms ease-out, font-size 150ms ease-out; } .focused .form-label { transform: translateY(-125%); font-size: 0.75em; } .form-input { position: relative; padding: 12px 0px 5px 0; width: 100%; outline: 0; border: 0; box-shadow: 0 1px 0 0 #e5e5e5; transition: box-shadow 150ms ease-out; } .form-input:focus { box-shadow: 0 2px 0 0 blue; } .form-input.filled { box-shadow: 0 2px 0 0 lightgreen; } </style> </head> <body> <div class="form-wrapper"> <form action="" class="form"> <div class="form-group"> <label class="form-label" for.........完整代码请登录后点击上方下载按钮下载查看
网友评论0