美文网首页你不知道的技术
纯CSS无JS实现点击事件

纯CSS无JS实现点击事件

作者: 闲人追风落水 | 来源:发表于2019-07-12 19:39 被阅读195次

    <input id="A" type="checkbox">
    <label for="A">
    <span class="box"></span>
    <span class="info" >已经阅读</span>
    </label>

    主要根据的技术点:

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    首先这里要实现一个点击后input框出现对号(注意这里的选择对号不是默认的,而是自己设计的有颜色有大小的)如下所示

    image

    简单的举例子:设计思路把input标签隐藏,根据input是否处于checked的状态来实现 .box标签通过伪类实现对号的添加。如上label标签绑定input的checkbox输入框,绑定方式是通过id的形式,

    label的for值绑定input的id 值,id的绑定使得点击label等同于点击input,通过input 的checked 的状态来实现是否有被点击过的判断。

    css代码如下

    <style>

    • {
      margin: 0;
      padding: 0;
      }

    .box {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin-top: 100px;
    margin-left: 100px;
    border: 1px solid #18c250;
    border-radius: 3px;
    }

    input[type=checkbox]:checked+label .box:before {
    content: "";
    position: absolute;
    top: 28px;
    left: 2px;
    width: 23px;
    height: 3px;
    background-color: #18c250;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    }

    input[type=checkbox]:checked+label .box:after {
    content: "";
    position: absolute;
    top: 24px;
    left: 15px;
    width: 37px;
    height: 3px;
    background-color: #18c250;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    }

    .info {
    float: left;
    margin-top: 92px;
    margin-left: 10px;
    font-size: 48px;
    user-select: none;
    }

    label {
    display: inline-block;
    max-width: 100%;
    }

    input[type=checkbox] {
    display: none;
    }
    </style>

    相关文章

      网友评论

        本文标题:纯CSS无JS实现点击事件

        本文链接:https://www.haomeiwen.com/subject/gwaykctx.html