.ibutton-container { position: relative; height: 27px; cursor: pointer; overflow: hidden; /* set max width to that of sprite */ max-width: 400px; /* prevent text selection */ -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -moz-user-focus: ignore; -moz-user-input: disabled; /* set default width based on ON/OFF labels */ width: 89px; } .ibutton-container input { position: absolute; top: 0; left: 0; /* hide the element */ filter:alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0; /* allow checking of input if visible */ -moz-user-input: enabled !important; } .ibutton-handle { display: block; height: 27px; cursor: inherit; position: absolute; top: 0; left: 0; width: 0; background: transparent url(../images/ibutton-slider-giva-original.png) no-repeat scroll 0 -54px; z-index: 3; padding-left: 3px; /* set default width based on ON/OFF labels */ width: 33px; } .ibutton-handle-right { height: 100%; width: 100%; padding-right: 3px; background: transparent url(../images/ibutton-slider-giva-original.png) no-repeat scroll 100% -54px; z-index: 3; } .ibutton-handle-middle { height: 100%; width: 100%; background: transparent url(../images/ibutton-slider-giva-original.png) no-repeat scroll 50% -54px; z-index: 3; } div.ibutton-label-on, div.ibutton-label-off { white-space: nowrap; font-size: 12px; line-height: 12px; font-weight: bold; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; text-transform: uppercase; cursor: inherit; display: block; height: 22px; position: absolute; width: auto; top: 0; padding-top: 5px; overflow: hidden; background: transparent url(../images/ibutton-slider-giva-original.png) no-repeat scroll 0 0; } div.ibutton-label-on { color: #fff; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4); left: 0; padding-top: 5px; z-index: 1; } div.ibutton-label-on span { padding-left: 5px; } div.ibutton-label-off { color: #7c7c7c; background-position: 100% 00; text-shadow: 0 -1px 2px rgba(153, 153, 153, 0.4); text-align: right; right: 0; /* the off label needs to near the left edge (ideally just 5px away) * it just needs to be close enough that it won't show under the handle if dragged to the left */ width: 95%; } div.ibutton-label-off span { padding-right: 5px; } /* create an outline when button gets focus via keyboard */ .ibutton-container label { cursor: inherit; padding: 1px 3px; font-size: 1em !important; } .ibutton-focus label { /* we must use border, since outline doesn't work in IE */ border: 1px dotted #666 !important; padding: 0 2px; } .ibutton-focus div.ibutton-label-on span label { /* use white for more contrast */ border-color: #fff !important; } /* add padding to right/left so that text gets clipped before absolute edge */ .ibutton-padding-left, .ibutton-padding-right { position: absolute; top: 4px; z-index: 2; background: transparent url(../images/ibutton-slider-giva-original.png) no-repeat scroll 0 -4px; width: 3px; height: 20px; } .ibutton-padding-left { left: 0; } .ibutton-padding-right { right: 0; background-position: 100% -4px; } /* change the styles of the handle when being dragged */ .ibutton-active-handle .ibutton-handle { background-position: 0 -108px; } .ibutton-active-handle .ibutton-handle-right { background-position: 100% -108px; } .ibutton-active-handle .ibutton-handle-middle { background-position: 50% -108px; } /* styles to use when the button is disabled */ .ibutton-disabled { cursor: not-allowed !important; /* cursor options: default or not-allowed */ } .ibutton-disabled .ibutton-handle { background-position: 0 -81px; } .ibutton-disabled .ibutton-handle-right { background-position: 100% -81px; } .ibutton-disabled .ibutton-handle-middle { background-position: 50% -81px; } .ibutton-disabled div.ibutton-label-on { background-position: 0 -27px; } .ibutton-disabled div.ibutton-label-off { background-position: 100% -27px; } .ibutton-disabled .ibutton-padding-left { background-position: 0 -27px; } .ibutton-disabled .ibutton-padding-right { background-position: 100% -27px; } .ibutton-disabled div.ibutton-label-on { color: #fff; } .ibutton-disabled div.ibutton-label-off { color: #cbcbcb; }