JQM flipswitch custom size

by Norbert Wilms

HTML

<div data-role="page" id="page">
    <div data-role="main" class="ui-content">
        <div id="flipswitchWrapper">
            <select data-role="flipswitch">
                <option>Value OFF</option>
                <option>Value ON</option>
            </select>
        </div>
    </div>
</div>

CSS

#flipswitchWrapper .ui-flipswitch {
    position:absolute;
    width:500px;
    height:100px;
    line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
    padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    width:198px;
    height:98px;
    text-indent: -10em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    padding-top:0px;
    margin-left:300px;
    text-indent: -5em;
    line-height: inherit;
}

#flipswitchWrapper .ui-flipswitch-off {
    line-height: inherit;
}