div+css实现按钮点击弹出输入框代码

代码语言:html

所属分类:其他

代码描述:div+css实现按钮点击弹出输入框代码

代码标签: 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