title: iCheck doesn't work ( strange behavior )
body: <p>I want to use iCheck library: 
  <a href="https://github.com/fronteed/iCheck" rel="noreferrer">https://github.com/fronteed/iCheck</a>
  <a href="http://fronteed.com/iCheck/" rel="noreferrer">http://fronteed.com/iCheck/</a></p>
  
  <p>When i init the element with the library it get warped like the documentation describe <a href="https://github.com/fronteed/iCheck/#how-it-works" rel="noreferrer">https://github.com/fronteed/iCheck/#how-it-works</a> but with opacity zero.</p>
  
  <p>You can see it here: <a href="http://jsfiddle.net/buRq7/8/" rel="noreferrer">http://jsfiddle.net/buRq7/8/</a></p>
  
  <p><code>$(".ex-f").iCheck();</code>    </p>
  
  <p>somebody have the same issue? </p>
  
  <p>Thanks</p>
  
  <p>My code is:</p>
  
  <pre><code>/*!
   * iCheck v1.0.1, http://git.io/arlzeA
   * =================================
   * Powerful jQuery and Zepto plugin for checkboxes and radio buttons customization
   *
   * (c) 2013 Damir Sultanov, http://fronteed.com
   * MIT Licensed
   */
  
  (function($) {
  
    // Cached vars
    var _iCheck = 'iCheck',
      _iCheckHelper = _iCheck + '-helper',
      _checkbox = 'checkbox',
      _radio = 'radio',
      _checked = 'checked',
      _unchecked = 'un' + _checked,
      _disabled = 'disabled',
      _determinate = 'determinate',
      _indeterminate = 'in' + _determinate,
      _update = 'update',
      _type = 'type',
      _click = 'click',
      _touch = 'touchbegin.i touchend.i',
      _add = 'addClass',
      _remove = 'removeClass',
      _callback = 'trigger',
      _label = 'label',
      _cursor = 'cursor',
      _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
  
    // Plugin init
    $.fn[_iCheck] = function(options, fire) {
  
      // Walker
      var handle = 'input[type="' + _checkbox + '"], input[type="' + _radio + '"]',
        stack = $(),
        walker = function(object) {
          object.each(function() {
            var self = $(this);
  
            if (self.is(handle)) {
              stack = stack.add(self);
            } else {
              stack = stack.add(self.find(handle));
            };
          });
        };
  
      // Check if we should operate with some method
      if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) {
  
        // Normalize method's name
        options = options.toLowerCase();
  
        // Find checkboxes and radio buttons
        walker(this);
  
        return stack.each(function() {
          var self = $(this);
  
          if (options == 'destroy') {
            tidy(self, 'ifDestroyed');
          } else {
            operate(self, true, options);
          };
  
          // Fire method's callback
          if ($.isFunction(fire)) {
            fire();
          };
        });
  
      // Customization
      } else if (typeof options == 'object' || !options) {
  
        // Check if any options were passed
        var settings = $.extend({
            checkedClass: _checked,
            disabledClass: _disabled,
            indeterminateClass: _indeterminate,
            labelHover: true,
            aria: false
          }, options),
  
          selector = settings.handle,
          hoverClass = settings.hoverClass || 'hover',
          focusClass = settings.focusClass || 'focus',
          activeClass = settings.activeClass || 'active',
          labelHover = !!settings.labelHover,
          labelHoverClass = settings.labelHoverClass || 'hover',
  
          // Setup clickable area
          area = ('' + settings.increaseArea).replace('%', '') | 0;
  
        // Selector limit
        if (selector == _checkbox || selector == _radio) {
          handle = 'input[type="' + selector + '"]';
        };
  
        // Clickable area limit
        if (area &lt; -50) {
          area = -50;
        };
  
        // Walk around the selector
        walker(this);
  
        return stack.each(function() {
          var self = $(this);
  
          // If already customized
          tidy(self);
  
          var node = this,
            id = node.id,
  
            // Layer styles
            offset = -area + '%',
            size = 100 + (area * 2) + '%',
            layer = {
              position: 'absolute',
              top: offset,
              left: offset,
              display: 'block',
              width: size,
              height: size,
              margin: 0,
              padding: 0,
              background: '#fff',
              border: 0,
              opacity: 0
            },
  
            // Choose how to hide input
            hide = _mobile ? {
              position: 'absolute',
              visibility: 'hidden'
            } : area ? layer : {
              position: 'absolute',
              opacity: 0
            },
  
            // Get proper class
            className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio,
  
            // Find assigned labels
            label = $(_label + '[for="' + id + '"]').add(self.closest(_label)),
  
            // Check ARIA option
            aria = !!settings.aria,
  
            // Set ARIA placeholder
            ariaID = _iCheck + '-' + Math.random().toString(36).replace('0.', ''),
  
            // Parent &amp; helper
            parent = '&lt;div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''),
            helper;
  
          // Set ARIA "labelledby"
          if (label.length &amp;&amp; aria) {
            label.each(function() {
              parent += 'aria-labelledby="';
  
              if (this.id) {
                parent += this.id;
              } else {
                this.id = ariaID;
                parent += ariaID;
              }
  
              parent += '"';
            });
          };
  
          // Wrap input
          parent = self.wrap(parent + '/&gt;')[_callback]('ifCreated').parent().append(settings.insert);
  
          // Layer addition
          helper = $('&lt;ins class="' + _iCheckHelper + '"/&gt;').css(layer).appendTo(parent);
  
          // Finalize customization
          self.data(_iCheck, {o: settings, s: self.attr('style')}).css(hide);
          !!settings.inheritClass &amp;&amp; parent[_add](node.className || '');
          !!settings.inheritID &amp;&amp; id &amp;&amp; parent.attr('id', _iCheck + '-' + id);
          parent.css('position') == 'static' &amp;&amp; parent.css('position', 'relative');
          operate(self, true, _update);
  
          // Label events
          if (label.length) {
            label.on(_click + '.i mouseover.i mouseout.i ' + _touch, function(event) {
              var type = event[_type],
                item = $(this);
  
              // Do nothing if input is disabled
              if (!node[_disabled]) {
  
                // Click
                if (type == _click) {
                  if ($(event.target).is('a')) {
                    return;
                  }
                  operate(self, false, true);
  
                // Hover state
                } else if (labelHover) {
  
                  // mouseout|touchend
                  if (/ut|nd/.test(type)) {
                    parent[_remove](hoverClass);
                    item[_remove](labelHoverClass);
                  } else {
                    parent[_add](hoverClass);
                    item[_add](labelHoverClass);
                  };
                };
  
                if (_mobile) {
                  event.stopPropagation();
                } else {
                  return false;
                };
              };
            });
          };
  
          // Input events
          self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) {
            var type = event[_type],
              key = event.keyCode;
  
            // Click
            if (type == _click) {
              return false;
  
            // Keydown
            } else if (type == 'keydown' &amp;&amp; key == 32) {
              if (!(node[_type] == _radio &amp;&amp; node[_checked])) {
                if (node[_checked]) {
                  off(self, _checked);
                } else {
                  on(self, _checked);
                };
              };
  
              return false;
  
            // Keyup
            } else if (type == 'keyup' &amp;&amp; node[_type] == _radio) {
              !node[_checked] &amp;&amp; on(self, _checked);
  
            // Focus/blur
            } else if (/us|ur/.test(type)) {
              parent[type == 'blur' ? _remove : _add](focusClass);
            };
          });
  
          // Helper events
          helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) {
            var type = event[_type],
  
              // mousedown|mouseup
              toggle = /wn|up/.test(type) ? activeClass : hoverClass;
  
            // Do nothing if input is disabled
            if (!node[_disabled]) {
  
              // Click
              if (type == _click) {
                operate(self, false, true);
  
              // Active and hover states
              } else {
  
                // State is on
                if (/wn|er|in/.test(type)) {
  
                  // mousedown|mouseover|touchbegin
                  parent[_add](toggle);
  
                // State is off
                } else {
                  parent[_remove](toggle + ' ' + activeClass);
                };
  
                // Label hover
                if (label.length &amp;&amp; labelHover &amp;&amp; toggle == hoverClass) {
  
                  // mouseout|touchend
                  label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass);
                };
              };
  
              if (_mobile) {
                event.stopPropagation();
              } else {
                return false;
              };
            };
          });
        });
      } else {
        return this;
      };
    };
  
    // Do something with inputs
    function operate(input, direct, method) {
      var node = input[0],
        state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked,
        active = method == _update ? {
          checked: node[_checked],
          disabled: node[_disabled],
          indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false'
        } : node[state];
  
      // Check, disable or indeterminate
      if (/^(ch|di|in)/.test(method) &amp;&amp; !active) {
        on(input, state);
  
      // Uncheck, enable or determinate
      } else if (/^(un|en|de)/.test(method) &amp;&amp; active) {
        off(input, state);
  
      // Update
      } else if (method == _update) {
  
        // Handle states
        for (var state in active) {
          if (active[state]) {
            on(input, state, true);
          } else {
            off(input, state, true);
          };
        };
  
      } else if (!direct || method == 'toggle') {
  
        // Helper or label was clicked
        if (!direct) {
          input[_callback]('ifClicked');
        };
  
        // Toggle checked state
        if (active) {
          if (node[_type] !== _radio) {
            off(input, state);
          };
        } else {
          on(input, state);
        };
      };
    };
  
    // Add checked, disabled or indeterminate state
    function on(input, state, keep) {
      var node = input[0],
        parent = input.parent(),
        checked = state == _checked,
        indeterminate = state == _indeterminate,
        disabled = state == _disabled,
        callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
        regular = option(input, callback + capitalize(node[_type])),
        specific = option(input, state + capitalize(node[_type]));
  
      // Prevent unnecessary actions
      if (node[state] !== true) {
  
        // Toggle assigned radio buttons
        if (!keep &amp;&amp; state == _checked &amp;&amp; node[_type] == _radio &amp;&amp; node.name) {
          var form = input.closest('form'),
            inputs = 'input[name="' + node.name + '"]';
  
          inputs = form.length ? form.find(inputs) : $(inputs);
  
          inputs.each(function() {
            if (this !== node &amp;&amp; $(this).data(_iCheck)) {
              off($(this), state);
            };
          });
        };
  
        // Indeterminate state
        if (indeterminate) {
  
          // Add indeterminate state
          node[state] = true;
  
          // Remove checked state
          if (node[_checked]) {
            off(input, _checked, 'force');
          };
  
        // Checked or disabled state
        } else {
  
          // Add checked or disabled state
          if (!keep) {
            node[state] = true;
          };
  
          // Remove indeterminate state
          if (checked &amp;&amp; node[_indeterminate]) {
            off(input, _indeterminate, false);
          };
        };
  
        // Trigger callbacks
        callbacks(input, checked, state, keep);
      };
  
      // Add proper cursor
      if (node[_disabled] &amp;&amp; !!option(input, _cursor, true)) {
        parent.find('.' + _iCheckHelper).css(_cursor, 'default');
      };
  
      // Add state class
      parent[_add](specific || option(input, state) || '');
  
      // Set ARIA attribute
      disabled ? parent.attr('aria-disabled', 'true') : parent.attr('aria-checked', indeterminate ? 'mixed' : 'true');
  
      // Remove regular state class
      parent[_remove](regular || option(input, callback) || '');
    };
  
    // Remove checked, disabled or indeterminate state
    function off(input, state, keep) {
      var node = input[0],
        parent = input.parent(),
        checked = state == _checked,
        indeterminate = state == _indeterminate,
        disabled = state == _disabled,
        callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
        regular = option(input, callback + capitalize(node[_type])),
        specific = option(input, state + capitalize(node[_type]));
  
      // Prevent unnecessary actions
      if (node[state] !== false) {
  
        // Toggle state
        if (indeterminate || !keep || keep == 'force') {
          node[state] = false;
        };
  
        // Trigger callbacks
        callbacks(input, checked, callback, keep);
      };
  
      // Add proper cursor
      if (!node[_disabled] &amp;&amp; !!option(input, _cursor, true)) {
        parent.find('.' + _iCheckHelper).css(_cursor, 'pointer');
      };
  
      // Remove state class
      parent[_remove](specific || option(input, state) || '');
  
      // Set ARIA attribute
      disabled ? parent.attr('aria-disabled', 'false') : parent.attr('aria-checked', 'false');
  
      // Add regular state class
      parent[_add](regular || option(input, callback) || '');
    };
  
    // Remove all traces
    function tidy(input, callback) {
      if (input.data(_iCheck)) {
  
        // Remove everything except input
        input.parent().html(input.attr('style', input.data(_iCheck).s || ''));
  
        // Callback
        if (callback) {
          input[_callback](callback);
        };
  
        // Unbind events
        input.off('.i').unwrap();
        $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i');
      };
    };
  
    // Get some option
    function option(input, state, regular) {
      if (input.data(_iCheck)) {
        return input.data(_iCheck).o[state + (regular ? '' : 'Class')];
      };
    };
  
    // Capitalize some string
    function capitalize(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    };
  
    // Executable handlers
    function callbacks(input, checked, callback, keep) {
      if (!keep) {
        if (checked) {
          input[_callback]('ifToggled');
        };
  
        input[_callback]('ifChanged')[_callback]('if' + capitalize(callback));
      };
    };
  })(window.jQuery || window.Zepto);
  
  $(".ex-f").iCheck();
  </code></pre>
  
  <p>And</p>
  
  <pre><code>&lt;div class="my-checkbox"&gt;
      &lt;input class="ex-f" id="Finish" name="Finish" type="checkbox" value="1"&gt; doesn't work
  &lt;/div&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>.my-checkbox {
      border: 1px solid blue;
      height: 20px;
  }
  .ex-f {
      border: 1px solid red;
  }
  </code></pre>