纯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{
    width: 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);
}

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

原文地址：https://www.cnblogs.com/zhangzhiyong/p/9652246.html