gistfile1.txt

HTML================================

<div>
    <input type="radio"><label><span>Short Text</span></label>
</div>
<div>
    <input type="radio"><label><span>Longer Text That Should Eventually Wrap</span></label>
</div>
<div>
    <input type="radio"><label><span>Longer Text That Should yes Eventually Wrap and wrap and wrap</span></label>
</div>

CSS=================================


*{
    font-family:sans-serif;   
}
div{
    position:relative;
    margin-bottom:12px;
    width:260px;
}
input{
    position:absolute
}
label{
    display:inline-block;
    margin-left:20px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    background:#eee; 
    color:#333;
    padding:3px 6px;
    cursor:pointer;
}
label::before{
    content:'';
    position:absolute;
    width:19px;
    height:100%;
    left:0;
    top:0;
    cursor:pointer;
    background:#eee;
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
}
label::after{
    content:'';
    width:0;
    height:0;
    left:0;
    margin:50% 0 0 8px;
    position:absolute;
    top:-6px;
    border-bottom:6px solid transparent;  /* left arrow slant */
    border-top:6px solid transparent; /* right arrow slant */
    border-left:5px solid #444; /* bottom, add background color here */
    font-size:0px;
    line-height:0px;
}
span{
    display:inline;
    /*background:yellow*/
}

.hover,
.hover:before,
.active:before{
    background:#ddd;
     color:#000;   
}
.hover:after{
    border-left:5px solid #111;
}
.active{
    background:#ffc;
}
.active:after{
    top:-2px;
    left:-4px;
    border-right:6px solid transparent;  /* left arrow slant */
    border-top:5px solid #000; /* right arrow slant */
    border-left:6px solid transparent; /* bottom, add background color here */   
}

JS==========================================

var RBS = {

    //Set label width to that of wrapped text
    //Couldn't accomplish with CSS b/c wrap-initiating container keeps
    //width that kicks off the wrap (instead of collapsing down around
    //wrapped content)
    setLabelWidths:function() {
        $('label').each(function() {
            var $this=$(this);
            $this.css({
                width:$this.find('span:eq(0)').width() + 'px'
            })
        });
    },

    //Label behavaiors
    attachLabelBehaviors:function(){

        var attachHovers,
            attachClicks;

        attachHovers=function() {
            var arrive=function(){$(this).addClass('hover')},
                leave=function(){$(this).removeClass('hover')};
            $('label').hover(arrive,leave);
        };

        attachClicks=function() {
            $('label').click(function(){
                var $that=$(this);
                $that.toggleClass('active');
                $('label').each(function(){
                    if($(this)[0]!==$that[0]){
                        $(this).removeClass('active');
                    }
                });
            })
        };

        attachHovers();
        attachClicks();
    },



    //=========================================================
    init:function() {
        this.setLabelWidths();
        this.attachLabelBehaviors();
    }
};

RBS.init();