码迷,mamicode.com
首页 > Web开发 > 详细

纯css实现同一页面下选择之后更换内容效果

时间:2018-09-15 22:07:22      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:idt   val   png   length   ref   html   输入验证   设置   col   

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

技术分享图片技术分享图片技术分享图片

 

在这里有一个小技巧,就是  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);
}

  

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

 

纯css实现同一页面下选择之后更换内容效果

标签:idt   val   png   length   ref   html   输入验证   设置   col   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!