zoukankan      html  css  js  c++  java
  • CSS揭秘(六用户体验)

    一、鼠标

    鼠标禁用

    :disabled, [disabled], [aria-disabled="true"] {
    cursor: not-allowed;
    }
    隐藏鼠标
    cursor: none;
    伪元素扩大可点击区域
     
    二、自定义复选框
    一个新的伪类 :checked。这个伪类只在复选框被勾选时才会匹配,不论这个勾选状态是由用户交互触发,还是由脚本触发。
    可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。
    其实有一个元素总是跟复选框形影不离、息息相关,它就是 <label>(标签元素)。当 <label> 元素与复选框关联之后,也可以起到触发开关的作用。
    可以为它添加生成性内容(伪元素),并基于复选框的状态来为其设置样式。然后,就可以把真正的复选框隐藏起来(但不能把它从 tab 键切换焦点的队列中完全删除),再把生成性内容美化一番,用来顶替原来的复选框!
    <input type="checkbox" id="awesome" />
    <label for="awesome">Awesome!</label>
     
    input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
    }
     
    input[type="checkbox"]:checked + label::before {
    content: '2713';
    background: yellowgreen;
    }
     
    input[type="checkbox"] + label::before {
    content: 'a0'; /* 不换行空格 */
    display: inline-block;
    vertical-align: .2em;
    .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background: silver;
    text-indent: .15em;
    line-height: .65;
    }
  • 相关阅读:
    kafka学习笔记:知识点整理
    java操作hbase 增删改查
    json往前台送数据中文乱码
    17年数据结构笔记
    设置MYSQL数据库编码为UTF-8
    c++的 struct和class
    算法之arrays and strings
    对于快速排序的理解
    sql杂记
    Spring搭建练习遇到的坑
  • 原文地址:https://www.cnblogs.com/forever-xuehf/p/13472735.html
Copyright © 2011-2022 走看看