纯 CSS 利用 label + input 实现选项卡
clip 属性
用于剪裁绝对定位元素。
.class {
position:absolute;
clip:rect(0px,60px,200px,0px);
}
scroll-behavior: smooth;
作用在容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换,变成平滑过渡切换效果。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS 利用label 和input 实现选项卡</title>
<style>
.tab label {
padding: 10px;
border: 1px solid #ccc;
margin-right: -1px;
text-align: center;
float: left;
overflow: hidden;
}
/* 清除浮动 */
.tab::after {
content: "";
display: table;
clear: both;
}
.box {
height: 200px;
border: 1px solid #ccc;
scroll-behavior: smooth; /* 缓冲效果 */
overflow: hidden;
margin-top: 10px;
}
.item {
height: 100%;
position: relative;
overflow: hidden;
}
.item input {
position: absolute;
top: 0;
height: 100%;
width: 1px;
border: 0;
padding: 0;
margin: 0;
clip: rect(0 0 0 0);
}
</style>
</head>
<body>
<h1>tab</h1>
<div class="tab">
<label for="tab1">tab1</label>
<label for="tab2">tab2</label>
<label for="tab3">tab3</label>
</div>
<div class="box">
<div class="item">
<!-- 点击label时,for对应的input会获得焦点, 并且出现在容器中的可视位置 -->
<!-- 为禁止手机端自带键盘弹出,需要给input加上“readonly”属性 -->
<input type="text" id="tab1" readonly>
<p>选项卡1内容</p>
</div>
<div class="item">
<input type="text" id="tab2" readonly>
<p>选项卡2内容</p>
</div>
<div class="item">
<input type="text" id="tab3" readonly>
<p>选项卡3内容</p>
</div>
</div>
<footer>
bottom
</footer>
</body>
</html>
纯 CSS 利用 label + input 实现选项卡的更多相关文章
- 简单的纯css重置input单选多选按钮的样式--利用伪类
由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 纯CSS制作的TAB选项卡
代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容.具体请看下面代码. 关于兼容性,因为是用CSS3来制作的,所 ...
- 自定义常用input表单元素二:纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- 自定义常用input表单元素一:纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼
下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...
随机推荐
- MySQL索引原理及慢查询优化-zz
https://tech.meituan.com/mysql-index.html MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色,但所 ...
- MySQL索引背后的数据结构及算法原理(employees实例)
摘要 http://blog.codinglabs.org/articles/theory-of-mysql-index.html 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特 ...
- linux 通过 mac地址 查询 ip 和 清除arp 缓存
问题重述: 今天,突然找不到vm 的ip 了,但是可以从网卡状态上看到其 mac 地址,并且确定主机是启动状态,网络状态良好(后来发现因为子网掩码的问题,导致虚拟机和网关之间不通信,从而导致其他网络的 ...
- arm 开发板更新 gcc/gcc++ | Debain 更新 gcc,无需编译直接更新 gcc
4我的板子是 Orange pi 3,只能以 卧槽来形容... 我是搞.net core的,这板子死活搞不了. 刷的是Debain系统. 说实话,这个板子不错,可就是官方的系统实在不敢恭维,内核旧,软 ...
- [A] 1046 Shortest Distance
The task is really simple: given N exits on a highway which forms a simple cycle, you are supposed t ...
- SDN期末
一.项目描述 负载均衡程序 二.小组分工 组名:我们真的很弱 组员:李佳铭.吴森杰.张岚鑫.薛宇涛.杨凌澜 三.代码演示及过程描述 四.课程总结
- 解决Windows Server2008 R2中IE开网页时弹出阻止框
使用Windows Server2008,用IE打开网站时会弹出“Internet Explorer增强安全配置正在阻止来自下列网站的此应用程序中的内容”的对话框.如下图所示: 2011-10-14_ ...
- vue2.0模拟锚点
在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能. 解决办法: <a href="javascript:void(0)" @click=&quo ...
- Test传送门(更新中)
一.Codeforces传送门: Avito Code Challenge 2018 题解传送门 Codeforces Round #485 (Div. 2) 题解传送门 二.hihocode ...
- python第三十七课——模块
3.模块(m) 概念:在python中.py结尾的文件,我们就称为模块,可以将类.函数.属性...等内容定义在模块中 分类: 1).标准库模块:安装完python环境就有的模块,这些模块都是最常用的模 ...