JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="checkbox-wrapper">
                    <label>
                        <input type="radio">
                        <span class="fake-box"></span>
                        <span class="text-black">Label text</span>
                    </label>
                </div>
    <div class="checkbox-wrapper">
                    <label>
                        <input type="checkbox">
                        <span class="fake-box"></span>
                        <span class="text-black">Label text</span>
                    </label>
                </div>

CSS

.checkbox-wrapper {
  position: relative;
  margin-bottom: 20px; }
  .checkbox-wrapper label {
    padding-left: 32px;
    position: relative;
    cursor: pointer; }
  .checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0; }
    .checkbox-wrapper input[type="checkbox"]:checked ~ .fake-box:after, .checkbox-wrapper input[type="checkbox"]:checked ~ .fake-box:after {
      border-color: #9d1b31;
      width: 14px; }
  .checkbox-wrapper input[type="checkbox"] ~ .fake-box, .checkbox-wrapper input[type="checkbox"] ~ .fake-box {
    display: block;
    height: 22px;
    width: 22px;
    left: 0;
    position: absolute;
    top: 50%;
    margin-top: -11px; }
    .checkbox-wrapper input[type="checkbox"] ~ .fake-box:after, .checkbox-wrapper input[type="checkbox"] ~ .fake-box:after {
      content: "";
      position: absolute;
      top: 50%;
      margin-top: -6px;
      background: url('http://s22.postimg.org/x3ixdx8rx/icn_checkmark.png') no-repeat 0 0;
      width: 14px;
      height: 12px;
      overflow: hidden; }
    @media only screen and (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
      .checkbox-wrapper input[type="checkbox"] ~ .fake-box:after, .checkbox-wrapper input[type="checkbox"] ~ .fake-box:after {
        background: url('../images/[email protected]') no-repeat 0 -29px;
        background-size: 56px auto;
        margin-top: -6px;
        width: 14px;
        height: 12px; } }
    .checkbox-wrapper input[type="checkbox"] ~ .fake-box:after, .checkbox-wrapper input[type="checkbox"] ~ .fake-box:after {
      position: absolute;
      left: 4px;
      top: 50%;
      width: 0;
      -webkit-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      -moz-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      -o-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      transition: width 0.5s...

JavaScript

function selectorSupported(selector) {

            var support, link, sheet, doc = document,
                root = doc.documentElement,
                head = root.getElementsByTagName('head')[0],

                impl = doc.implementation || {
                    hasFeature: function () {
                        return false;
                    }
                },

                link = doc.createElement("style");
            link.type = 'text/css';

            (head || root).insertBefore(link, (head || root).firstChild);

            sheet = link.sheet || link.styleSheet;

            if (!(sheet && selector)) return false;

            support = impl.hasFeature('CSS2', '') ?

                function (selector) {
                    try {
                        sheet.insertRule(selector + '{ }', 0);
                        sheet.deleteRule(sheet.cssRules.length - 1);
                    } catch (e) {
                        return false;
                    }
                    return true;

                } : function (selector) {

                sheet.cssText = selector + ' { }';
                return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
            };
            return support(selector);
        }
            if (!selectorSupported(':checked')) {
                $('body').addClass('checked-unsupported');
            }