bootstrap自适应反馈表单简约美化效果代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap自适应反馈表单简约美化效果代码
代码标签: bootstrap 自适应 反馈 表单 简约 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> body{ margin-top: 100px; } .form-group.input-material { position: relative; margin-top: 50px; margin-bottom: 25px; } .form-group.input-material label { color: #b1bbc4; font-size: 16px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 7px; transition: 0.1s ease all; -moz-transition: 0.1s ease all; -webkit-transition: 0.1s ease all; } .form-group.input-material .form-control { border: none; border-bottom: 2px solid #ced4da; border-radius: 0px; background: transparent; padding-left: 5px; box-shadow: none; /* required fields */ /* active state */ /* invalid state */ } .form-group.input-material .form-control:required ~ label::after { content: '*'; color: #dc3545; padding-left: 2px; font-size: 0.8em; } .form-group.input-material .form-control:focus, .form-group.input-material .form-control[value]:not([value=""]) { border-bottom-color: #007bff; color: #000; } .form-group.input-material .form-control:focus ~ label, .form-group.input-material .form-control[value]:not([value=""]) ~ label { top: -25px; font-size: 14px; color: #007bff; font-weight: 500; } .form-group.input-material .form-control:focus.invalid, .form-group.input-material .form-control.invalid, .form-group.input-material .form-control:focus.parsley-error, .form-group.input-material .form-control[value]:not([value=""]).parsley-error { border-bottom-color: #dc3545; } .form-group.input-material .form-control:focus.invalid ~ label, .form-group.input-material .form-control.invalid ~ label, .form-group.input-material .form-control:focus.parsley-error ~.........完整代码请登录后点击上方下载按钮下载查看
网友评论0