Spinbox HTML Source code

Interface effect:

HTML Source:

<span  style= "font-family: Microsoft Ya Black, new song body, song body; Display:inline-block; White-space:nowrap; font-size:12px; margin:0px; padding:0px; BORDER:1PX solid RGB (164, 190, 212); width:148px; " ><input type= "text" value= "one" id= "Tborder" data-options= "Min:1" numberboxname= "Tborder" style= "outline:none; height:21px; border:0px Solid RGB (127, 157, 185); line-height:21px; padding-top:0px; padding-bottom:0px; Resize:none; text-indent:3px; width:130px; " ><span  style= "Display:inline-block; Vertical-align:top; margin:0px; padding:0px; " ><span  style= "Display:block; font-size:1px; width:18px; height:10px; Background:url (data:image/gif;base64,r0lgodlhcqafaiabae1hhf///yh5baeaaaealaaaaaajaauaaaimjaonwircdhxpslyaads=) 5px 2px no-repeat RGB (224, 236, 249); " ></span><span  style= "Display:block; font-size:1px; width:18px; height:10px; Background:url (DATA:IMAGE/GIF;BASE64,R0LGODLHCQAFAIABAE1HHF///YH5BAEAAAEALAAAAAAJAAUAAAIMHIMGOXYPFOJYJLSAAds=) 5px 3px no-repeat rgb (224, 236, 249); " ></span></span></span>

Here all use in-line style, avoid the problem of deformation dislocation caused by the style overlay, the background image uses Data URL encoding, no longer need to consider the picture storage location problem .

Note: Formatting the code may cause dislocation problems;

Spinbox HTML Source code