JSFiddle - React, Tailwind, and code Playground

by travelandchat

HTML

<!--For checkbox input "id" attribute is required.-->
  <!--Autogenerated <label> used for styling. Use <span> for labeling.-->
  <div style="height: 25px; padding-top: 5px;">
    <input type="checkbox" id="test1" /><span style="margin-left: 10px;">Test1</span>
  </div>
  <div style="height: 25px; padding-top: 5px;">
    <input type="checkbox" id="test2" /><span style="margin-left: 10px;">Test2</span>
  </div>

  <script>
    'use strict';
    $(function() {

      $('#test1').mobibox();
      $('#test2').mobibox({
        color: 'green',
        backgroundColor: 'yellow',
        hoverColor: 'red',
        hoverBackgroundColor: 'orange'
      });
    });

  </script>

CSS

.mobileCheckboxLabel {
  position: relative;
  background-color: #fff;
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 6px;
  transition: box-shadow 0.4s, border 0.4s;
  border: solid 2px #31708f;
  box-shadow: 0 0 1px #31708f;
  cursor: pointer;
  float: left;
}

.mobileCheckboxSpan {
  height: 1em;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  color: #31708f;
  line-height: 1;
  text-align: center;
  font-weight: 900;
}

JavaScript

(function($) {

  $.fn.mobibox = function(options) {

    this.each(function() {
      let $checkbox = $(this);
      let checkboxId = $checkbox.attr('id');
      //append label
      $checkbox.after('<label for="' + checkboxId + '"><span>&check;</span></label>');
      let $label = $('label[for=' + checkboxId + ']');
      let $span = $label.find('span');
      //set styles
      $checkbox.css('display', 'none');
      $label.addClass('mobileCheckboxLabel');
      $span.addClass('mobileCheckboxSpan');
      let color = options && options.color ? options.color : '#31708f';
      let backgroundColor = options && options.backgroundColor ? options.backgroundColor : '#fff';
      let hoverColor = options && options.hoverColor ? options.hoverColor : '#8E0FE8';
      let hoverBackgroundColor = options && options.hoverBackgroundColor ? options.hoverBackgroundColor : '#fff';
      $label.hover(function() {
          $label.css({
            'border-color': hoverColor,
            'box-shadow': '0 0 1px ' + hoverColor,
            /* Soften the jagged edge */
            'background-color': hoverBackgroundColor
          });
          $span.css({
            'color': hoverColor
          });
        },
        function() {
          $label.css({
            'border-color': color,
            'box-shadow': '0 0 1px ' + color,
            /* Soften the jagged edge */
            'background-color': backgroundColor
          });
          $span.css({
            'color': color
          });
        }
      );

      if ($checkbox.is(':checked')) {
        $span.css('display', 'inline');
      } else {
        $span.css('display', 'none');
      }

      $checkbox.click(function() {
        if ($checkbox.is(':checked')) {
          $span.css('display', 'inline');
        } else {
          $span.css('display', 'none');
        }
      });
    });


    return this;
  };
}(jQuery));