纯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);
}
是不是挺简单的呢?这些小技巧用好了还能实现相当多的效果。。。。
纯css实现同一页面下选择之后更换内容效果的更多相关文章
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 纯css实现Magicline Navigation(下划线动画导航菜单)
看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...
- day19—纯CSS实现菜单列表下框跟随效果
转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...
- 10分钟使用纯css实现完整的响应式导航菜单栏的效果
在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...
- CSS之实现垂直时间线展示相关内容效果
如下,最近在工作中遇到实现时间线效果的需求,用纯css即可实现,下面给出详细实现代码. html: <div class="time_line_list_wrap hide" ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用纯css改变select的下拉菜单
select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...
- 使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...
- 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...
随机推荐
- Java简单高精度合集
第一个Java的算法程序.记得可以使用Alt+'/'自动补全sysout和main之类的. BigInteger在java.math.BigInteger中. import java.math.Big ...
- 洛谷P3577 [POI2014]TUR-Tourism
给定一个n个点,m条边的无向图,其中你在第i个点建立旅游站点的费用为Ci.在这张图中,任意两点间不存在节点数超过10的简单路径.请找到一种费用最小的建立旅游站点的方案,使得每个点要么建立了旅游站点,要 ...
- 一篇文章搞定面试中的二叉树题目(java实现)
最近总结了一些数据结构和算法相关的题目,这是第一篇文章,关于二叉树的. 先上二叉树的数据结构: class TreeNode{ int val; //左孩子 TreeNode left; //右孩子 ...
- IT兄弟连 JavaWeb教程 Servlet中定义的变量的作用域类型
在Java语言中,局部变量和实力变量有着不同的作用于,它们的区别如下: 局部变量在一个方法中定义,每当一个线程执行局部变量所在的方法时,在线程的堆栈中就会创建这个局部变量,当线程执行完该方法,局部变量 ...
- Java | 技术应用 | 利用Jsoup处理页面
根据微信公众号的推文链接地址,对文章内容进行爬取,利用jsoup解析文章源代码,加上结合xpth提取文文章信息, 利用正则表达式读取文章发表时间. Jsoup <!-- jsoup HTML p ...
- python之条件判断、循环和字符串格式化
1. python的条件判断:if和else 在条件判断中可以使用算数运算符 等于:== 不等于:!= 大于:> 小于:< 大于等于:>= 小于等于:<= 示例1: usern ...
- 【Helvetic Coding Contest 2018】B2. Maximum Control (medium)
Description 传送门(翻译就别想了,本人英语太垃圾) Solution 设ans[i]为设置i个船时能控制的最多星球数(看到这你可能因为是dp,然而我可以很负责地告诉你是假的) 首先一个显然 ...
- pyinstaller打包遇到的错误处理
在python环境中运行中没问题,但打包时遇到以下问题 1.有时打包出现 UnicodeDecodeError错误, 可以改变cmd的编码(暂且这么叫),在cmd 中输入 chcp 65001,再次打 ...
- 【转】log4j的日志
一.Log4j配置 第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 放在src下的话就不用配置 否则得去web. ...
- [转]自定义ASP.NET MVC JsonResult序列化结果
本文转自:http://blog.163.com/luckcq@yeah/blog/static/17174770720121293437119/ 最近项目中前台页面使用EasyUI的jQuery插件 ...