zoukankan      html  css  js  c++  java
  • [CSS 3] Create Custom Keyboard Accessible Checkboxes

    Take the native HTML checkboxes and jazz them up while still ensuring they are keyboard accessible. We use pseudo-elements and pseudo-classes to replicate the focus and the ability to tab to custom checkboxes. 

    /* hide native one */
    input[type="checkbox"] + label {
      display: block;
      position: relative;
      padding-left: 2rem;
    }
    
    /* create a checkbox */
    input[type="checkbox"] + label::before {
      content: '';
      position: absolute;
      top: 4px;
      left: 0;
      width: 22px;
      height: 22px;
      background: #fff;
    }
    
    /* highlighted on checked */
    input[type="checkbox"]:checked + label::before {
      background: #6505CC;
    }
    
    /* Create a checked mark */
    input[type="checkbox"] + label::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 6px;
      width: 8px;
      height: 16px;
      border-width: 0 2px 2px 0;
      border-color: #fff;
      border-style: solid;
      transform: rotate(38deg);
    }
    
    /* Outline on focus */
    input[type="checkbox"]:focus + label::before {
      outline: #5d9dd5 solid 1px;
      box-shadow: 0 0px 8px #5e9ed6;
    }

  • 相关阅读:
    ScrollView卷轴视图
    SharedPreferences数据存储
    progressBar进度条
    SeekBar拖动条
    TabWidget选择标签
    RadioGroupRadioButton
    SQLite数据操作
    Spinner
    .NET学习资源
    如何在局域网内其他机器访问我的asp.net网站?
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13230770.html
Copyright © 2011-2022 走看看