div+css实现按钮点击弹出输入框代码
代码语言:html
所属分类:其他
代码描述:div+css实现按钮点击弹出输入框代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-size:10px;
font-family:Roboto,sans-serif;
background-color:#ff7b73;
margin:0;
display:grid;
height:100vh;
place-items:center;
}
.c-checkbox {
display:none;
}
.c-checkbox:checked + .c-formContainer .c-form {
width:37.5em;
}
.c-checkbox:checked + .c-formContainer .c-form__toggle {
visibility:hidden;
opacity:0;
transform:scale(0.7);
}
.c-checkbox:checked + .c-formContainer .c-form__input,.c-checkbox:checked + .c-formContainer .c-form__buttonLabel {
transition:0.2s 0.1s;
visibility:visible;
opacity:1;
transform:scale(1);
}
.c-checkbox:not(:checked) + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle::before,.c-checkbox:checked + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle::before {
content:'Thank You! \1F60A';
}
.c-checkbox:not(:checked) + .c-formContainer .c-form__input:required:valid ~ .c-form__toggle {
pointer-events:none;
cursor:default;
}
.c-formContainer,.c-form,.c-form__toggle {
width:20em;
height:6.25em;
}
..........完整代码请登录后点击上方下载按钮下载查看
网友评论0