标签：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);
}
是不是挺简单的呢？这些小技巧用好了还能实现相当多的效果。。。。
标签：idt val png length ref html 输入验证 设置 col
原文地址：https://www.cnblogs.com/zhangzhiyong/p/9652246.html
