Forums are often asked to use CSS to beautify the select tag, in fact, whenever you see the cool is to use JavaScript to achieve. Try to do it yesterday, basically realize the primary function. Take it out and share it with everyone. First you can look at the preview effect: Http://www.iwcn.net/demo/select.
"Functional Requirements"
1, call to be convenient, after doing well should be like this:
Copy Code code as follows:
function Loadselect (selectobj) {
Passing in a Select object can beautify his style
}
2, do not change the original form items, the form of the page code does not destroy:
Copy Code code as follows:
<form name= "F" onsubmit= "GetResult ();" >
<fieldset>
<legend> User Registration </legend>
<div>
<label for= "username" > account </label>
<input type= "text" id= "username" name= "username"/>
</div>
<div>
<label for= "pwd" > Password </label>
<input type= "password" name= "pwd" id= "pwd"/>
</div>
<div>
<label for= "province" > Province </label>
<select id= "province" Name= "province" >
<option value= "Ten" > Jiangxi </option>
<option value= "One" > Fujian </option>
<option value= "A" > Guangdong </option>
<option value= "" > Zhejiang </option>
</select>
</div>
</fieldset>
<input type= "Submit" value= "submitted" name= "Btnsub"/>
</form>
"The realization of ideas"
First step: Hide the Select in the form.
Why? It's simple, because this guy is so stubborn, he can't get what you want with CSS. So kill it.
Step Two: Use the script to find the absolute position of the Select label on the page.
We used the div tag in that position as a fake, good-looking spot to be his double.
Step three: Use the script to read the values in the select tag.
Although it is hidden, we can use the options in it.
Fourth step: When the user clicks on the select tag's stand-in, which is the Div. Let's use a div to float underneath the last div, and this is the substitute for the options.
This is generally the case, and then we go one step further to achieve it!
"Ready to Work"
1, think about what you want to beautify the select to look like, and prepare the corresponding picture. I prepared two small pictures, that is, the Drop-down Arrow 1 and the drop-down arrow 2,1 is the default style, 2 is the mouse over the style.
2, write a common form submission page, such as the bottom of this. Notice that I have defined the basic CSS style for select, added code to call the JS file in the header, and added a script to call the function in the body.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" ZH-CN "> <pead> <meta http-equiv=" content- Type "content=" text/html; charset=gb2312 "/> <meta http-equiv=" content-language "content=" ZH-CN "/> <title> use JavaScript to beautify the SEL ect</title> <script type= "Text/javascript" src= "select.js" ></script> <style type= "Text/css" > select{width:200px;height:20px;} </style> </pead> <body> <p> use javascript simulation Select to beautify the effect of </p> <form name = "F" onsubmit= "GetResult" (); > <fieldset> <legend> User registration </legend> <div> <label for= "use Rname "> Account </label> <input type=" text "id=" username "name=" username "/> </div> <div> <label for= "PWD "> Password </label> <input type=" password "name=" pwd "id=" pwd "/> </div> & lt;div> <label for= "province" > Province </label> <select id= "province" Name= "province" > <option value= "ten" > Jiangxi </option> <option value= "One" > Fujian </OPTION&G T <option value= "" > Guangdong </option> <option value= "" > Zhejiang </option> </s elect> </div> </fieldset> <input type= "Submit" value= "submitted" name= "Btnsub"/> </f orm> <script type= "Text/javascript" > Loadselect (document.f.province); </script> <p> Author Blog </p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
"Writing JavaScript"
Copy Code code as follows:
<script type= "Text/javascript" src= "Select.js" ></script>
Create a new JS file and save for Select.js, the rest of the work we all in this JS to complete.
Function name: Loadselect (obj);
Parameters: Select Object
Related functions:
Copy Code code as follows:
function Offset (e)
Take the absolute position of the label
{
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
}
}
The first step: Record the absolute position of the Select. A double will come up to know should stand there.
var offset=offset (obj);
This explains that offset is a function to get the absolute position of an object. Written outside the Loadselect () function. He has four attributes, namely, Top/left/width/height.
Step Two: Hide the Select.
Copy Code code as follows:
Obj.style.display= "None";
Step three: Virtual a div to come out instead of select
Copy Code code as follows:
var idiv = document.createelement ("div");
Idiv.id= "Selectof" + obj.name;
IDiv.style.position = "absolute";
Idiv.style.width=offset.width + "px";
Idiv.style.height=offset.height + "px";
Idiv.style.top=offset.top + "px";
Idiv.style.left=offset.left + "px";
idiv.style.background= "url (icon_select.gif) no-repeat right 4px";
Idiv.style.border= "1px solid #3366ff";
Idiv.style.fontsize= "12px";
Idiv.style.lineheight=offset.height + "px";
Idiv.style.textindent= "4px";
Document.body.appendChild (IDIV);
Step Fourth: Give it a value that the original select has no one to select.
Copy Code code as follows:
idiv.innerhtml=obj.options[obj.selectedindex].innerhtml;
Step Fifth: Add the mouse over style to the alias.
Copy Code code as follows:
Idiv.onmouseover=function () {//mouse move to
idiv.style.background= "url (icon_select_focus.gif) no-repeat right 4px";
}
Idiv.onmouseout=function () {//mouse removal
idiv.style.background= "url (icon_select.gif) no-repeat right 4px";
}
Sixth step: Add critical mouse click events.
Copy Code code as follows:
Idiv.onclick=function () {//mouse click
if (document.getElementById ("Selectchild" + Obj.name)) {
Determine if a DIV has been created
if (childcreate) {
Determine if the current drop is turned on and shut down if it is open. is turned off on the open.
document.getElementById ("Selectchild" + obj.name). style.display= "None";
Childcreate=false;
}else{
document.getElementById ("Selectchild" + obj.name). style.display= "";
Childcreate=true;
}
}else{
The initial div is placed below the previous Div, when the options are double.
var cdiv = document.createelement ("div");
Cdiv.id= "Selectchild" + obj.name;
CDiv.style.position = "absolute";
Cdiv.style.width=offset.width + "px";
Cdiv.style.height=obj.options.length *20 + "px";
Cdiv.style.top= (offset.top+offset.height+2) + "px";
Cdiv.style.left=offset.left + "px";
Cdiv.style.background= "#f7f7f7";
Cdiv.style.border= "1px solid silver";
var Uul = document.createelement ("ul");
Uul.id= "Uulchild" + obj.name;
Uul.style.liststyle= "None";
uul.style.margin= "0";
uul.style.padding= "0";
Uul.style.fontsize= "12px";
Cdiv.appendchild (Uul);
Document.body.appendChild (CDIV);
Childcreate=true;
for (Var i=0;i<obj.options.length;i++) {
Add options from the original select label to Li
var lli=document.createelement ("Li");
Lli.id=obj.options[i].value;
Lli.style.textindent= "4px";
Lli.style.height= "20px";
Lli.style.lineheight= "20px";
lli.innerhtml=obj.options[i].innerhtml;
Uul.appendchild (LLi);
}
var Liobj=document.getelementbyid ("Uulchild" + obj.name). getElementsByTagName ("Li");
for (Var j=0;j<obj.options.length;j++) {
Add mouse events to the Li label
Liobj[j].onmouseover=function () {
This.style.background= "Gray";
this.style.color= "White";
}
Liobj[j].onmouseout=function () {
this.style.background= "White";
This.style.color= "BLACK";
}
Liobj[j].onclick=function () {
To do two things, one is to save the user's choice to the original select label, or to do a good job of looking at the form before it can get the value of the select.
obj.options.length=0;
Obj.options[0]=new Option (this.innerhtml,this.id);
At the same time we pull down the drop off.
document.getElementById ("Selectchild" + obj.name). style.display= "None";
Childcreate=false;
idiv.innerhtml=this.innerhtml;
}
}
}
}
Finally, this is a bit more complicated, and again, before we do this, the look of select is out, and the next step is to add a div to imitate the drop-down option that appears after the select is clicked. We can say that the Select tab's options are extracted from JavaScript and write it like this:
Copy Code code as follows:
<div>
<ul>
<li>optionName</li>
<li>optionName</li>
<li>optionName</li>
</ul>
</div>
That's basically it. There are some defects, there is time for everyone to add together!
