本文实例讲述了JS模拟并美化的表单控件效果实例。分享给大家供大家参考。具体如下：
这里演示使用JS美化并模拟网页表单控件，十分漂亮的表单效果，使用时可以将代码内的JS保存为文件, 方便调用，使用方法：WellForm(element) //element 为表单元素。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-like-table-control-style-codes/
具体代码如下：
模拟表单控件 .WellForm *{margin:0;padding:0;} .WellForm{font-size:12px;font-family:arial;line-height:21px;} .WellForm pre{float:left;margin-right:10px;} .WellForm .TextL,.WellForm .TextR,.WellForm .WellText, .WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect, .WellForm .Welltextarea .T, .WellForm .Welltextarea .T .TL, .WellForm .Welltextarea .T .TM, .WellForm .Welltextarea .B, .WellForm .Welltextarea .B .BL, .WellForm .Welltextarea .B .BM, .WellForm .WellRadio, .WellForm .WellCheckBox, .WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton {background:url(images/WellForm.gif) no-repeat;} .WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;} .WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;} .WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;} .WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;} .WellForm .WellTextH{background-position:0 -63px;} .WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;} .WellForm .SelectL{width:3px;background-position:0 -84px;} .WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;} .WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;} .WellForm .WellSelect select{display:none;} .WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;} .WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;} .WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;} .WellForm .WellSelect ul li.hover{background:#333;} .WellForm .Welltextarea{float:left;} .WellForm .Welltextarea .T, .WellForm .Welltextarea .T .TL, .WellForm .Welltextarea .T .TM, .WellForm .Welltextarea .B, .WellForm .Welltextarea .B .BL, .WellForm .Welltextarea .B .BM {height:5px;overflow:hidden;} .WellForm .Welltextarea .T{float:left;width:100%;background-position:right -126px;} .WellForm .Welltextarea .TH{float:left;width:100%;background-position:right -131px;} .WellForm .Welltextarea .T .TL{background-position:0 -126px;} .WellForm .Welltextarea .TH .TL{background-position:0 -131px;} .WellForm .Welltextarea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;} .WellForm .Welltextarea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;} .WellForm .Welltextarea .B{float:left;width:100%;background-position:right -146px;} .WellForm .Welltextarea .BH{float:left;width:100%;background-position:right -151px;} .WellForm .Welltextarea .B .BL{background-position:0 -146px;} .WellForm .Welltextarea .BH .BL{background-position:0 -151px;} .WellForm .Welltextarea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;} .WellForm .Welltextarea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;} .WellForm .Welltextarea .M, .WellForm .Welltextarea .M .MR {float:left;background:url(images/textarea-1.gif) repeat-y;} .WellForm .Welltextarea .M{background-position:0 0;} .WellForm .Welltextarea .M .MR{background-position:right 0;} .WellForm .Welltextarea .MH, .WellForm .Welltextarea .MH .MR {float:left;background:url(images/textarea-2.gif) repeat-y;} .WellForm .Welltextarea .MH{background-position:0 0;} .WellForm .Welltextarea .MH .MR{background-position:right 0;} .WellForm .Welltextarea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(images/textarea.gif);font-family:arial;font-size:12px;resize:none;} .WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;} .WellForm .WellRadioH{background-position:-15px -284px;} .WellForm .WellRadio input{margin-top:13px;display:none;} .WellForm .WellCheckBox{float:left; width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;} .WellForm .WellCheckBoxH{background-position:0 -283px;} .WellForm .WellCheckBox input{margin-top:12px;display:none;} .WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;} .WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;} .WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;} .WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:09;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;} .WellForm .WellButtonH{background-position:0 -244px;} form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;} form .item{float:left;clear:both;width:100%;margin-bottom:10px;} .WellForm label{float:left;width:4em;height:21px;text-align:right;}
希望本文所述对大家的javascript程序设计有所帮助。
