zoukankan      html  css  js  c++  java
  • 纯css实现同一页面下选择之后更换内容效果

    实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框

    在这里有一个小技巧,就是  1.对下面的输入框设置同样的样式,保证在更换的时候不出现抖动;2.对输入框区域一开始就设置display:none。让其不显示,在上方单选框checked的时候再显示出来。

    html代码如下:

    <div class="main1">
                <input type="radio" name="regist" id="regist1" checked>             <!--默认选中-->
                <label for="regist1">输入手机号
                    <span>·</span>
                    <span>·</span>
                    <span>·</span>
                </label>
                <input type="radio" name="regist" id="regist2">
                <label for="regist2">输入验证码
                    <span>·</span>
                    <span>·</span>
                    <span>·</span>
                </label>
                <input type="radio" name="regist" id="regist3">
                <label for="regist3">设置密码
                </label>
                <div class="tel">
                    <label for="tel1">手机号:</label>
                    <input type="tel" minlength="11" maxlength="11" id="tel1" placeholder="请输入你的手机号">
                </div>
                <div class="code">
                    <label for="code1">验证码:</label>
                    <input type="text" minlength="6" maxlength="6" id="code1" placeholder="请输入验证码">
                </div>
                <div class="pass">
                    <label for="pass1">密码:</label>
                    <input type="password" minlength="6" maxlength="16" id="pass1" placeholder="请输入不少于6位数的密码">
                </div>
                <a href=""><input type="submit" value="获取验证码"></a>
                <a href="../HTML/mine.html"><input type="submit" value="提交"></a>
            </div>
    

      css代码如下:

    /* 一开始设置display值为none */
    .main1>div{
         100%;
        height: 1.52rem;
        background-color: white;
        font-size: .46rem;
        align-items: center;
        justify-content: space-around;
        padding-left: .48rem;
        display: none;
    }
    
    /* 设置选中后下的内容 */
    .main1>input[id="regist1"]:checked~div[class="tel"]{
        display: flex;
    }
    .main1>input[id="regist1"]:checked~a:nth-of-type(1){
        display:flex;
    }
    .main1>input[id="regist2"]:checked~div[class="code"]{
        display: flex;
    }
    .main1>input[id="regist2"]:checked~a:nth-of-type(1){
        display: flex;
    }
    .main1>input[id="regist2"]:checked~a:nth-of-type(1)>input{
        background-color: rgb(219, 64, 59);
    }
    .main1>input[id="regist3"]:checked~div[class="pass"]{
        display: flex;
    }
    .main1>input[id="regist3"]:checked~a:nth-of-type(2){
        display: flex;
    }
    .main1>input[id="regist3"]:checked~a:nth-of-type(2)>input{
        background-color: rgb(219, 64, 59);
    }
    

      

    是不是挺简单的呢?这些小技巧用好了还能实现相当多的效果。。。。

  • 相关阅读:
    hdu 5007 水题 (2014西安网赛A题)
    hdu 1698 线段树(成段替换 区间求和)
    poj 3468 线段树 成段增减 区间求和
    hdu 2795 公告板 (单点最值)
    UVaLive 6833 Miscalculation (表达式计算)
    UVaLive 6832 Bit String Reordering (模拟)
    CodeForces 124C Prime Permutation (数论+贪心)
    SPOJ BALNUM (数位DP)
    CodeForces 628D Magic Numbers (数位DP)
    POJ 3252 Round Numbers (数位DP)
  • 原文地址:https://www.cnblogs.com/zhangzhiyong/p/9652246.html
Copyright © 2011-2022 走看看