css实现输入框输入placeholder上浮美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现输入框输入placeholder上浮美化效果代码,输入框没有获取焦点前,placeholder正常显示,获取后placeholder上浮空出位置。
代码标签: css 输入框 输入 placeholder 上浮 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #fff; font-size: 62.5%; } div.centralize { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; flex-direction: column; } div.input-block { position: relative; } div.input-block input { font-weight: 500; font-size: 1.6rem; color: #495055; width: 350px; padding: 15px 15px; border-radius: 1rem; border: 2px solid #D9D9D9; outline:none; } div.input-block span.placeholder { position: absolute; margin: 17px 0; padding: 0 4px; font-famil.........完整代码请登录后点击上方下载按钮下载查看
网友评论0