div+css实现输入框聚焦label文字上浮阴影效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现输入框聚焦label文字上浮阴影效果代码代码
代码标签: div css 输入框 聚焦 label 文字 上浮 阴影
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ background: white; margin: 100px; } .input-container { position: relative; width: 210px; } .input { padding: 10px; height: 40px; border: 2px solid #0B2447; border-top: none; border-bottom: none; font-size: 16px; background: transparent; outline: none; box-shadow: 7px 7px 0px 0px #0B2447; transition: all 0.5s; } .input:focus { box-shadow: none; transition: all 0.5s; } .label { position: absolute; top: 10px; left: 10px; color: #0B2447; transition: all 0.5s; transform: scale(0); z-index: -1; } .input-container .topline { position: absolute; content: ""; background-color: #0B2447; width: 0%; height: 2px; right: 0;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0