jQueryUI enhanced radio button

by bizamajig

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>  
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />  
</head>
<body>
    
<div class="demo">
  
<div class="ui-widget">
    <label for="1">Tags: </label>
    <input type="radio" name="egy"/>
    <label for="2">Tags: </label>
    <input type="radio" name="egy" />    
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

</body>
</html>

CSS

.inline-placeholder {
            display: inline-block;
        }
        .AC-tag-container {
            padding: 2px;
            border: 1px solid #CCCCCC;
            display:inline-block;
            position: relative;
        }
        
        .AC-item span {
            display:inline-block;
            vertical-align: bottom;
        }
        
        .AC-item span.AC-del-container {
            background: none !important;
            border: 0px solid transparent !important;
        }        
        
        .AC-item {
            line-height: 16px;
            display:inline-block;
            margin: 0px 2px;
            padding: 0px 0px 0px 6px;
        }
        .ui-autocomplete-input {
          border: 0px solid transparent !important;
          outline: 0 none;
}
.ui-circle {
    border-top-left-radius: 999px !important;
    border-top-right-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
    border-bottom-right-radius: 999px !important;    
}

.ui-dot {
    margin: -1px 0px 0px -1px;
}

JavaScript

(function($) {
    $.widget("ui.radio", {
        _create: function() {
            var self = this;

            if (!this.element.attr('id')) {
                var d = new Date();
                this.element.attr('id', d.getTime() + '_' + Math.random() * 1000);
            }

            this.overlay = $('<label for="' + this.element.attr('id') + '" class="ui-button ui-widget ui-widget-content ui-corner-all ui-button-text-only ui-circle" role="button" aria-disabled="' + this.element.attr('disabled') + '"></label>');
            this.icon = $('<span class="ui-icon ui-icon-radio-off ui-dot" aria-pressed="' + this.element[0].checked + '"></span>');

            self.icon.css('background-position-x', '16px');
            self.icon.css('background-position', '16px 0px');

            if (this.element.attr('disabled')) {
                this.overlay.addClass('ui-state-disabled');
            }

            if (this.element[0].checked) {
                self.icon.css('background-position-x', '');
                self.icon.css('background-position', '');

            }

            this.element.addClass('ui-helper-hidden-accessible');
            this.overlay.append(this.icon);
            this.overlay.insertBefore(this.element);
            this.element.change(function() {
                jQuery('input[name="' + self.element.attr('name') + '"]:radio').each(function(index, element) {
                    if (element.checked) {
                        $(element).data('radio').icon.css('background-position-x', '');
                        $(element).data('radio').icon.css('background-position', '');
                    }
                    else {
                        $(element).data('radio').icon.css('background-position-x', '16px');
                        $(element).data('radio').icon.css('background-position', '16px 0px');
                    }
                });
            });

            this.element.focus(function() {
               ...