focus style implementation

by David McClelland

HTML

<div class="widget-content widget-radiobuttonlist-wrapper" orientation="horz" style="width: 292px; height: 28px;" id="root_RadioButton-4">
    <table cellpadding="0" cellspacing="0" class="widget-radiobuttonlist" style="width:292px; height:28px;" tabindex="1">
        <tbody>
            <tr style="width:100%; height:1%;">
                <td align="center" state-name="Lo" class="widget-radio-button-item button-selected" style="width:25%; height:1%;  selected-value=" 10""=""><span style="  font-weight:normal; font-style:normal; text-decoration:none;" class="radio-button-state-name textsize-normal">Lo</span></td>
                <td align="center" state-name="danger" class="widget-radio-button-item" style="width:25%; height:1%;  selected-value=" 80""=""><span style="  font-weight:normal; font-style:normal; text-decoration:none;" class="radio-button-state-name textsize-normal">danger</span></td>
                <td align="center" state-name="Normal" class="widget-radio-button-item" style="width:25%; height:1%;  selected-value=" 90""=""><span style="  font-weight:normal; font-style:normal; text-decoration:none;" class="radio-button-state-name textsize-normal">Normal</span></td>
                <td align="center" state-name="Hi" class="widget-radio-button-item" style="width:25%; height:1%; "><span style="  font-weight:normal; font-style:normal; text-decoration:none;" class="radio-button-state-name textsize-normal">Hi</span></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.widget-radiobuttonlist {border-width:1px;border-color:#b3b3b3;border-style:solid;} .widget-radiobuttonlist .widget-radiobuttonlist {background: #ffffff;background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);background: -o-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);background: -ms-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);background: linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );} #root_RadioButton-4 .widget-radiobuttonlist td {border-width:1px;border-color:#b3b3b3;border-style:solid;} #root_RadioButton-4 .widget-radiobuttonlist span { color : #333333;  font-weight:normal; font-style:normal; text-decoration:none;} #root_RadioButton-4 .widget-radiobuttonlist .button-selected {background: #349fd6;background: -moz-linear-gradient(top,  #349fd6 0%, #124ab5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#349fd6), color-stop(100%,#124ab5));background: -webkit-linear-gradient(top,  #349fd6 0%,#124ab5 100%);background: -o-linear-gradient(top,  #349fd6 0%,#124ab5 100%);background: -ms-linear-gradient(top,  #349fd6 0%,#124ab5 100%);background: linear-gradient(top,  #349fd6 0%,#124ab5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#349fd6', endColorstr='#124ab5',GradientType=0 );} #root_RadioButton-4 .widget-radiobuttonlist .button-selected span { color : #ffffff;  font-weight:bold; font-style:normal; text-decoration:none;} 

.widget-radiobuttonlist-wrapper {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

 .focus {
     border-color:#3399ff;
     border-width:2px;
     outline:none;
    }

.widget-radiobuttonlist {
	font-size: 11px;
    border-radius: 10px;
   ...

JavaScript

var focusElement = $("#root_RadioButton-4 .widget-radiobuttonlist");

focusElement.focus(function(){
    focusElement.addClass("focus");
});	
focusElement.blur(function(){
    focusElement.removeClass("focus");
});	
//$(".widget-radiobuttonlist").focus();