You don't have to worry about beautifying the Select Control all day.
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" ><HTML><HEAD><TITLE> simulate Combox Control-http://www.never-online.net </title><meta name= "generator" content= "EditPlus" ><META NAME= " Author "content=" "><meta name=" Keywords "content=" "><meta name=" Description "content=" "><style" >body, input{font-family:verdana;font-size:9pt;} H1{font-family:tahoma;font-size:22pt;text-align:left;} pre{font-size:9pt;font-family:verdana;border:1px solid #006600; Width:400px;padding:10px;background: #ffffff; color : #006600;}. ctlselect{border:1px solid #006600; Font-family:verdana;height:20px;color: #006600; background: #ffffff;/*background : URL ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */}.selected{background: #006600; color: #ffffff; height:20px;}. Unselected{height:20px;color: #006600; line-height:120%;border-bottom:1px solid #006600; ctlselect1{border:1px solid #003399; Font-family:verdana;height:20px;color: #003399; BACKground: #ffffff;/*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */}.selected1{background: #003399 ; color: #ffffff; height:20px;}. Unselected1{height:20px;color: #003399; line-height:120%;border-bottom:1px solid #003399; ctlselect2{border:1px solid #990000; Font-family:verdana;height:20px;color: #990000; background: #ffffff; * Background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */}.selected2{background: #990000; color: #ffffff; height:20px}. Unselected2{height:20px;color: #990000; line-height:120%;border-bottom:1px solid #990000; Copyright{margin-top:10px;font-size:9pt;text-align:center;color: #333; font-weight:bold;} </style></pead><body><script language= "JavaScript" ><!--//--------------------------- ----------------------------------//@ module:simulate Select control, IE only.//@ Debug in:ie 6.0//@ Script BY:BL Uedestiny, never-online//@ updated:2006-3-22//@ version:1.0 apha//@ email:bluedestiny [at] 126.com//@ Website:http://www.never-online.net//@ Please Hold this item please.////api//@ class:simulateselect ()////@ object . Style (Ctlstyle[,selstyle][,unselstyle])//Ctlstyle:main control Combox CSS class name//selstyle:when mouseover o R option Focus CSS class name//unselstyle:options blur ' s CSS class name////@ object.width= (WIDTHPX)//widthpx mu St be a digit number.////@ object.height= (HEIGHTPX)//HEIGHTPX must be a digit number.////@ object.getvalue (Ctlseli D/Ctlselid is the unique select control id////--------------for the next Version----------//@ object.readonly = (blnreadonly)//Blnreadonly must be a Boolean type or a number type.//@ object.addevent (W, h)/W:fire handler ' s event.//h:handler function.//-------------------------------------------------------------function $ (objid) { return document.getElementById (ObjID);}; function Offset (e) {var t = E.offsettop;var L = E.offsetleft;var w = E.offsetwidth;var h = e.offsetheight-2;while (e=e.offsetparent) {t+=e.offsettop;l+=e.offsetleft;} return {top:t,left:l,width:w,height:h}}//-----------------------------------------------function simulateselect ( {with (this) {this. IDs = [];this.name = this;//property for beta version//can editable comboxthis.readonly = true;this.height/20;THIS.W Idth = Null;this.ctlstyle = "Ctlselect"; this.selstyle = "selected"; This.unselstyle = "unselected"; this.elementprefix = " e__ "This.inputprefix =" i__ "; this.containerprefix =" c__ "; this.buttonprefix =" b__ "; return this;}; SimulateSelect.prototype.init = function (Ctlselids) {with (this) {eval (name). append (Ctlselids); eval (name). Simulates ();}}; SimulateSelect.prototype.style = function () {with (this) {Ctlstyle = Arguments[0];selstyle = Arguments[1];unselstyle = arguments[2];}};/ /-----------------------------------------------simulateSelect.prototype.append = function (Ctlselids) {with (this) {if (Ctlselids.indexof (",") >0) {var Arrctlsel = Ctlselids.split (","); for (var i=0; I<arrctlsel. length; i++) {eval (name). Ids.push (Arrctlsel[i]);} Else{eval (name). Ids.push (Ctlselids);}}; SimulateSelect.prototype.checkupOnMouseDown = function (e) {with (this) {//compatible mf.var el = e? e.srcelement:e . Target;if (El.id.indexOf (elementprefix) >-1 | | el.id.indexOf (inputprefix) >-1 | | el.id.indexOf (containerprefix ) >-1 | | El.id.indexOf (Buttonprefix) >-1) {return;} Else{for (var i=0; i<eval (name). Ids.length; i++) if ($ (containerprefix + ids[i])) $ (Containerprefix + eval (name). Ids[i]). style.display = ' None ';}}; SimulateSelect.prototype.simulates = function () {with (this) {for (var i=0; i<ids.length; i++) eval (name). Simulate ( Ids[i]);}; SimulateSelect.prototype.simulate = function (Ctlselid) {with (this) {var input;var button;var object;var offset;object = $ (ctlselid); offset = offset (object); input = document.createelement ("input"); button = document.createelement ("button" ); Button.setattribute ("id", Buttonprefix + ctlselid);//button.value = "⊿"; button.value = "6"; Button.style.fontFamily = "Webdings, Marlett"; button.style.background = ""; button.onclick = Input.onclick = function () {This.blur (); Eval (name). Expand (ctlselid, offset); Input.onselectstart = function () {eval (name). Expand (Ctlselid, offset), Event.returnvalue = false; Input.setattribute ("id", Inputprefix + ctlselid); input.title = Button.title = "click Expand Options"; input.style.cursor = Button.style.cursor = "Default"; input.classname = Button.classname = Ctlstyle;input.style.width = (width>0? Width: Object.offsetwidth): Height? Input.style.height=button.style.height=height: ""; input.value = Object[0].text;if (readonly==true) input.readOnly= true;//This is the only IE.object.insertAdjacentElement ("Afterend", button); Object.insertadjacentelement (" Afterend ", input); object.style.display = ' none ';}; SimulateSelect.prototype.expand = function (Ctlselid, offset) {with (this) {var div, Btn_off;var object = $ (ctlselid); if (! $ (containerprefix + ctlselid)) {div = document.createelement ("div");d Iv.style. Position = "Absolute";d iv.style.display = "Block";d Iv.setattribute ("id", Containerprefix + ctlselid);d Iv.classname = Ctlstyle;div.style.left = Offset.left;div.style.top = offset.top + offset.height;div.style.width = (width? width:offset . width) + 20;div.style.height = offset.height;document.body.appendchild (div); for (var i=0; i<object.length; i++) { div = document.createelement ("div");d iv.setattribute ("id", div.id = elementprefix + ctlselid + i);d iv.style.cursor = "def Ault "; if (object[i].text==$ (Inputprefix + ctlselid). Value) Div.classname = Selstyle;elsediv.classname = UnselStyle; Div.innertext = Div.title = Object[i].text;div.style.height = Height;div.setattribute ("value", object[i].value); Div.onmouseover = function () {for (Var j=0; j<$ (Containerprefix + ctlselid). Childnodes.length; j + +) {if ($ ( Containerprefix + ctlselid). Childnodes[j]==this) $ (containerprefix + ctlselid). Childnodes[j].classname = SelStyle; else$ (Containerprefix + ctlselid). Childnodes[j].classname = Unselstyle;}; Div.onclick = function () {$ (inputprefix + ctlselid). Value = this.innertext;$ (Containerprefix + ctlselid). Style.display = " None ";}; $ (Containerprefix + ctlselid). appendchild (div);} return;} if ($ (containerprefix + ctlselid). style.display== "None") {for (var i=0; i<object.length; i++) {if object[i].text==$ ( Inputprefix + ctlselid). Value) $ (elementprefix + ctlselid + i). ClassName = selstyle;else$ (elementprefix + ctlselid + i). Cl Assname = Unselstyle;} $ (Containerprefix + ctlselid). style.display= "Block"; if ($ (containerprefix + ctlselid). style.display== "Block" {$ (Containerprefix + ctlselid). style.display= "None"; ;}}}; SimulateSelect.prototype.getValue = function (Ctlselid) {with (this) {if ($ (inputprefix + ctlselid)) return $ (inputprefix + ctlselid). Value;elsereturn null;}; SimulateSelect.prototype.addEvent = function (W, h) {with (this) {}};//---------------------------------------------- -//window.onerror = Function ("return true;"); /IE only.document.attachEvent ("onmousedown", function (){A.checkuponmousedown (event); B.checkuponmousedown (event); C.checkuponmousedown (event)}); /--></script><p> simulate Combox control </p><p> demonstrate </p><p>< Select Id= "S0" ><option value= "-Please select your options-" >-Please select your options-</option><o Ption value= "1" >option1</option><option value= "2" >option2</option><option value= "3" > Option3</option><option value= "4" >option4</option><option value= "5" >option5</option ></select></p><p><select id= "S1" ><option value= "-Please select your options-" >- Please select your options-</option><option value= "1" >1option1</option><option value= "2" > 1option2</option><option value= "3" >1option3</option><option value= "4" >1option4</ Option><option value= "5" >1option5</option></select></p><p><select id= "S2" ><Option Value= "-Please select your options-" >-Please select your options-</option><option value= "1" >2op Tion1</option><option value= "2" >2option2</option><option value= "3" >2option3</option ><option value= "4" >2option4</option><option value= "5" >2option5</option></select ></p><p><select id= "S3" ><option value= "-Please select your options-" >-Please select your op tions-</option><option value= "1" >3option1</option><option value= "2" >3option2</option ><option value= "3" >3option3</option><option value= "4" >3option4</option><option Value= "5" >3option5</option></select></p><button class= "Ctlselect" > Get value </ Button><script language= "JavaScript" ><!--var a = new Simulateselect (); A.style ("Ctlselect", "Selected", " Unselected "); A.init (" S1 "); var b = new Simulateselect (); B.style (" CtlSelect1 "," selected1 ","Unselected1"); b.width = 300;b.init ("s2"); var c = new Simulateselect (); C.style ("CtlSelect2", "Selected2", "Unselected2 "); c.width = 320;c.init (" s3 ");//--></script><p> description </p><pre>//-------------- -----------------------------------------------//@ module:simulate Select control, IE only.//@ Debug in:ie 6.0//@ Script by:bluedestiny, never-online//@ updated:2006-3-22//@ version:1.0 apha//@ email:bluedestiny [at] 126.com// @ website:http://www.never-online.net//@ Hold This item please.////api//@ simulateselect (ctlselids)//C Tlselids:select control IDs, split by ","////@ simulateselect.style (Ctlstyle[,selstyle][,unselstyle))//Ctlstyle:ma In control Combox CSS class name//selstyle:when mouseover or option Focus CSS class name//unselstyle:options Blu R ' s CSS class name////@ simulateselect.width= (WIDTHPX)//WIDTHPX must be a digit number.////@ simulateselect.height = (HEIGHTPX)//HEIGHTPX must be aDigit number.////--------------for the next Version----------//@ simulateselect.readonly = (blnreadonly)//Blnrea DOnly must be a Boolean type or a number type.//@ simulateselect.addevent (W, h)/W:fire handler ' s event.//h:ha Ndler function.//-------------------------------------------------------------</pre><div class= " Copyright ">power by Bluedestiny, never-onlinehttp://www.never-online.net</div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
