Custom Inputs

custom_checkbox.js

(function( $ ){

  $.fn.styleCheckbox = function() {

    return this.each(function() {
      var $custom, $label, toggleCheckbox, $input = $(this);

      $custom = $('<a class="checkbox" href="#"></a>');
      
      toggleCheckbox = function() {
        if($input.prop('checked')) {
          $input.prop('checked', false);
          $custom.removeClass('checked').trigger('uncheck');
        } else {
          $input.prop('checked', true);
          $custom.addClass('checked').trigger('check');
        }
      };
    
      if($input.prop('checked')) {
        $custom.addClass('checked');
      }
    
      $custom.click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        toggleCheckbox();
      });
    
      // This will check/uncheck the checkbox if its associated label element is clicked
      if($label = ($input.parent('label') || $('label[for="' + $input.attr('id') + '"]'))) {
        $label.click(function(e) { toggleCheckbox(); });
      }
    
      $input.before($custom).hide();
    });

  };

})( jQuery );

custom_select.js

(function( $ ){

  $.fn.styleSelect = function() {

    return this.each(function() {
      var $this = $(this);

      if (!$this.data('styled') && !$.browser.opera) {
        var $selectWrap, title = $this.attr('title');
        
        if( $('option:selected', this).val() !== ''  ) title = $('option:selected', this).text();

        $selectWrap = $('<span class="custom-select"></span>').addClass($this.attr('class'));

        $this.removeClass();

        $this.hover(function() {
          $selectWrap.addClass('hover');
        }, function() {
          $selectWrap.removeClass('hover');
        });
        
        $this
          .wrap($selectWrap)
          .after('<span class="custom-select-button"><span class="custom-select-value">' + title + '</span><span class="custom-select-arrow"></span></span>')
          .change(function(){
            var val = $('option:selected', this).text();
            $this.next().children('.custom-select-value').text(val);
          })
          .data('styled', true);
      }

    });

  };
})( jQuery );