radio buts

by sanford

HTML

<form action="http://127.0.0.1/#" target="_blank">
    <FIELDSET class="radiogoo oneby"><LEGEND>Comment Privacy</LEGEND><input type="radio" name="privacy" value="1" id="privacy_1" checked="checked" class="trueradio" /><label for="privacy_1"><img class="fakeradio" src="http://127.0.0.1/otherpeople/trans.gif" />labelicious</label>
<input type="radio" name="privacy" value="2" id="privacy_2" class="trueradio userdefault" />
<label for="privacy_2"><img class="fakeradio" src="http://127.0.0.1/otherpeople/trans.gif" />labelicious2</label>
<input type="radio" name="privacy" value="3" id="privacy_3" class="trueradio" disabled="disabled" />
    <label for="privacy_3"><img class="fakeradio" src="http://127.0.0.1/otherpeople/trans.gif" />labelicious3</label>
        <input type="radio" name="privacy" value="4" id="privacy_4" class="trueradio" />
    <label for="privacy_4"><img class="fakeradio" src="http://127.0.0.1/otherpeople/trans.gif" />labelicious4</label>        <input type="radio" name="privacy" value="4" id="privacy_5" class="trueradio" />
    <label for="privacy_5"><img class="fakeradio" src="http://127.0.0.1/otherpeople/trans.gif" />labelicious4</label>        <input type="radio" name="privacy" value="6" id="privacy_6" class="trueradio" />
    <label for="privacy_6"><img class="fakeradio" src="http://127.0.0.1/otherpeople/trans.gif" />Public</label></FIELDSET>
    <input type="submit"></input>
</form>

CSS

BODY {background-color: white;}
FIELDSET.radiogoo {
    border:2px solid #666;
    padding: 4px 4px 8px 8px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: white;
}
.radiogoo.IE {
    /* silly ie draws bg-c behind entire fieldset block, even above content area
    and if you have a b-t will leave Npx of that color at the very top, where
    even the b-i can't cover it -- so custom stripe here with parent bg-c */
    border-top: 0;
    background-image: url(http://127.0.0.1/otherpeople/f_bb6_1px.gif?132);
    background-repeat: repeat-x;
}
.radiogoo.oneby {
    width: 129px;
}
.radiogoo.twoby {
    width: 274px;
}

.radiogoo LEGEND {
    font-family: Verdana;
    font-size: 11px;
    background-color: #555;
    color: white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 3px 5px 4px 5px;
}
.radiogoo INPUT[type=radio].trueradio {
    display: block;
    float: left;
}
.radiogoo LABEL {
    display: block;
    height: 16px;
    width: 120px;
    float:left;
    padding:4px;
    position: relative;
    left: -16px;
    margin-right: -16px; /* bring in the fldset after l offset */
    border: 2px solid transparent;
    border-radius: 3px;
    -moz-border-radius: 3px;    
    background-origin: border-box; /* arrow chip */
    -moz-background-origin: border;
    transition-property: background-color,border-color;
    -moz-transition-property: background-color,border-color;
    -webkit-transition-property: background-color,border-color;
    -moz-transition-duration: 0;
    -webkit-transition-duration: 0;
    font-size: 11px;
    font-family: Verdana;
    background-image: url(http://127.0.0.1/otherpeople/white_rarr.png?9);
    background-repeat: no-repeat;
    background-position: left center;
}
.radiogoo INPUT[type="radio"], .radiogoo LABEL {
    margin-top: 5px;
}
.radiogoo LABEL:hover  {
    background-image: url(http://127.0.0.1/otherpeople/daa_rarr.png?911);
    border-radius: 4px;
    border-color:...

JavaScript

!Browser.ie || !function() {
    $$('.radiogoo INPUT[type=radio]').addEvent('click',function(){
        if (!$(this).hasClass('firechecked')) {
            $(this).getSiblings('INPUT[type=radio]').removeClass('firechecked');
            $(this).addClass('firechecked');
            // redraw
  $(this).getSiblings('LABEL').setStyle('visibility','hidden').setStyle('visibility','visible');
        }

    });
    $$('INPUT:checked').addClass('firechecked'); // for post-markup :checked
    $$('FIELDSET').addClass('IE'); // for cosm flur
}();

!Browser.Engine.webkit || $$('.radiogoo LABEL').addEvent('click',function(){
    // enable kb nav
    this.getPrevious('INPUT[type=radio]').focus();
});