websch/editor/spinbtn/JQuerySpinBtn.css

/*
	Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
	Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
	(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)
	(Hats-off to John Resig for creating the excellent JQuery library. It is fab.)

	This control is achieved with no extra html markup whatsoever and uses unobtrusive javascript.

	Written by George Adamson, Software Unity (george.jquery@softwareunity.com) September 2006.
	Big improvements added by Mark Gibson, (mgibson@designlinks.net) September 2006.

	Do contact me with comments and suggestions but please don't ask for support.
	As much as I'd love to help with specific problems I have plenty to get on with already!

	Go ahead and use it in your own projects. This code is provided 'as is'.
	Sure I've tested in heaps of ways. Its good for me, but you use it at your own risk.
	SoftwareUnity and I are certainly not responsible if your computer sets fire to the sofa,
	hacks into the pentagon, hijacks a plane or gives you any kind of hassle whatsoever.

	If you'd like your spin-button image in a different place then you'll need to alter both
	the CSS below and the javascript isMouseOverUpDn() function to accommodate the new position.
	You could even have left and right buttons either side of the textbox.
*/

INPUT.spin-button {

	background: transparent url('spinner.svg') right top no-repeat;
	background-size: 17px 54px;
}

INPUT.spin-button.up {					/* Change button img when mouse is over the UP-arrow */
	cursor:pointer;
	background-position:100% -20px;		/* 18px matches height of 2 visible buttons */
}
INPUT.spin-button.down {				/* Change button img when mouse is over the DOWN-arrow */
	cursor:pointer;
	background-position:100% -40px;		/* 36px matches height of 2x2 visible buttons */
}