Code for Beautifying select tags using JavaScript

Some people in the Forum often ask how to beautify the select tag using CSS. In fact, all the cool things you see are implemented using JavaScript. I tried to implement the basic functions yesterday. Share it with you. First, let's take a look at the preview: http://www.iwcn.net/demo/select.

[Functional requirements]
1. The call should be convenient. After the call is completed, it should be as follows:

ProgramCode

Function loadselect (selectobj ){
// Input a select object to beautify its style
}

2. Do not change the original form items, and the page code of the form will not be damaged:

Program code

<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 = "10"> Jiangxi </option>
<Option value = "11"> Fujian </option>
<Option value = "12"> Guangdong </option>
<Option value = "13"> Zhejiang </option>
</SELECT>
</Div>
</Fieldset>
<Input type = "Submit" value = "Submit" name = "btnsub"/>
</Form>

[Implementation]

Step 1: Hide select in the form.
Why? It's very easy, because this guy is too stubborn to use CSS to get what you want. So we can kill it.

Step 2: Use a script to find the absolute position of the select tag on the webpage.
We use the DIV label at that position to make a fake, nice-looking alternative.

Step 3: Use a script to read the values in the select tag.
Although it is hidden, the options in it are still useful.

Step 4: when the user clicks the "select" tab, that is, the div. We use a div to move it to the bottom of a div. This is the replacement of options.

This is basically the case. Next we will implement it step by step!

[Preparations]
1. Think about how you want to beautify the SELECT statement and prepare the corresponding image. I have prepared two small pictures, that is, drop-down arrow 1 and drop-down arrow 2 are the default style, and 2 are the style that the mouse moves over.
2. Write a normal form submission page, such as the following. Note that I have defined the basic CSS style for select, added the code for calling the JS file in the header, and added the script for calling the function in the body.Ttp: // www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd "target =" _ blank "> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >< br/>Xmlns = "http://www.w3.org/1999/xhtml" lang = "ZH-CN">

Simulate select with JavaScript to achieve beautification

Http://www.iwcn.net> author blog