How to beautify select using javascript_form effects

People in forums often ask how to beautify the Select tag using CSS. In fact, everything you see that is cool is done using JavaScript. I tried it yesterday and basically implemented the primary function. Take it out and share it with everyone. You can first take a look at the preview effect: http://www.iwcn.net/demo/select.
【Functional Requirements】
1. It should be convenient to call. When done, it should look like this:

Copy code Code As follows:

function loadSelect(selectobj){
//Passing in a select object can beautify its style
}

2. No Change the original form items without destroying the page code of the form:

Copy the code The code is as follows:

>                                                                                                   🎜>                                                                             🎜>                                                                           ="province"> ; Guangdong 🎜>



[Implementation Idea]

Step one: Hide the select in the form.
Why? It's simple, because this guy is too stubborn and can't get what you want using CSS. So kill it.

Step 2: Use a script to find the absolute position of the select tag on the web page.
We use DIV tags to make a fake and better-looking one at that position to serve as his stand-in.

Step 3: Use a script to read the value in the select tag.
Although it is hidden, we can still use the options in it, so we can take them all.

Step 4: When the user clicks on the avatar of the select tag, which is the div. We use another div to float below the previous div. This is the stand-in for options.

That’s roughly it, let’s implement it step by step!

【Preparation】
1. Think about how you want to beautify the selection and prepare the corresponding pictures. I prepared two small pictures, which are drop-down arrow 1 and drop-down arrow 2. 1 is the default style and 2 is the style when the mouse is moved over.
2. Write a common form submission page, such as the one below. Note that I defined the basic CSS style for select, added the code to call the js file in the head, and added the script to call the function in the body.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="zh-CN"> <title>Use javascript to beautify Select</title> <style type="text/css"> select{width:200px;height:20px;} </style> <h1> </h1>Use javascript to simulate select to achieve beautification effect<form name="f" onsubmit="getResult();"> <fieldset> <legend> </legend>User Registration<div> <label for="username"> </label>Account<input type="text" id="username" name="username"> </div> <div> <label for="pwd"> </label>Password<input type="password" name="pwd" id="pwd"> </div> <div> <label for="province"> </label>Province<select id="province" name="province"> <option value="10"> </option>Jiangxi<option value="11"> </option>Fujian<option value="12"> </option>Guangdong<option value="13"> </option>Zhejiang</select> </div> </fieldset> <input type="submit" value=""> </form>