纯 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>

原文地址:https://www.cnblogs.com/cckui/p/9968246.html

时间: 2024-10-17 16:22:53

纯 CSS 利用 label + input 实现选项卡的相关文章

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

纯CSS制作的TAB选项卡

代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容.具体请看下面代码. 关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况. HTML代码 <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" che

利用target的特性,可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

发光的input框(纯css实现)

css代码: input{width: 200px;height: 40px;} input.focus{border-color: #08c;box-shadow: 0 0 4px #8bd6fb;transition: all .2s ease-out 0s;} 发光的input框(纯css实现),布布扣,bubuko.com

史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3外观美丽淡入淡出Tab菜单演示</title> <link rel="stylesheet" href="css/style.css&

纯CSS完成tab实现5种不同切换对应内容效果

很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <div class="main">                 <ul class="tabs">                     <li>                  

web中用纯CSS实现筛选菜单

web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个功能,特别是在电商网站,为了让用户过滤内容,仅显示符合自己的要求的内容.截个图来说,能更好的说明这样的功能,比如淘宝网: 如上图所示,用户想购买一件裙子,在整个产品列表中,显示的产品数量太多了.顾客不知道如何选择自己所需要的裙子.在顶部提供了一个分类,顾客选择需要的选项,产品中就会过滤掉不符合条件的

纯CSS实现表单验证

ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css selectors level 4中的表单相关的伪类选择器. 案例欣赏 代码我同样放到了codepen,大家可以在线研究,或下载收藏. 知识解析 关键在于使用css selectors levle4里的一些伪类实现表单验证,这些伪类有: :required和:optional :in-range和out-o

纯CSS打造可折叠树状菜单

1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="subsubfolder1" type="checkbox" /> <ol> <li class="file"><a>下级</a></li> <li> <label for=&q