Changes to the select CSS style in HTML

I thought it would be easy to solve the problem in CSS like input. I didn't expect to try it to know that the conventional CSS simply couldn't change the select style. How can I do it in CSS, select is still the default 3D style. So I searched the internet and found out that the select statement cannot be used to define CSS styles. It must be processed in a special way. I believe many of my friends will encounter this problem when processing webpages. So I found a good article and hope to help you ----

First of all, we need to tell you that if you use css, everything except the arrow can be changed. This is very awkward because other styles have been changed, the arrow cannot be changed to useless.
The following is an example of css to select.<Br/> <style>. box {border: 1px solid # C0C0C0; width: 182px; height: 19px; clip: rect (0px, 181px, 18px, 0px); overflow: hidden ;}. box2 {border: 1px solid # F4F4F4; width: 180px; height: 17px; clip: rect (0px, 179px, 16px, 0px); overflow: hidden;} select {position: relative; left:-2px; top:-2px; font-size: 12px; width: 183px; line-height: 14px; bo rder: 0px; color: #909993 ;} </style> <select hidefocus> <option selected> website cover <br/> </option> <op Tion value = "031113"> Shanghai summer (available in friendship) <br/> </option> <option value = "031106"> Shanghai summer (1) <br/> </option> <option value = "030916"> published in Shanghai summer <br/> </option> <option value = "031018"> In the rain (2) <br/> </option> <option value = "030915"> subway to Dawn (2) <br/> </option> <option value = "030913"> Metro to dawn <br/> </option> <option value = "031029"> what are you doing? <br/> </option> <option value = "000000"> more covers ...... <Br/> </option> </select> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

If you want to completely change the look of the select statement, one way is to use htc, but it has a disadvantage that it does not support other options except the ie kernel.
For example, download this file
The second method is to use js, which is to simulate the select effect. The Code is as follows:<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> <style>. table1 {background-color: white; FONT-FAMILY: Courier New, Courier; font-size: 12px }. td_out {FONT-FAMILY: Courier New, Courier; font-size: 12px; color: #000000; height: 15px; border: 1 solid # ffffff ;}. td_over {FONT-FAMILY: Courier New, Courier; font-size: 12px; cursor: default; background-color: # 3366cc; border: 1 solid #000000; color: # ffffff; height: 15px }. slv {vertical-align: bottom; FONT-FAMILY: Courier New, Courier; font-size: 12px; border-left-width: 0; border-top-width: 0; border-bottom-width: 0; border-right: 0 solid #000000; vertical-align: middle; height: 18px; color: #000000 ;}. down {position: relative; left:-2px; font-size: 11px; vertical-align: middle; width: 16; height: 16; color: #2050b0; background-color: # D0DFF7; border: 1 solid # 9fA3Ce; writing-mode: tb-rl; font-weight: bold ;}. seldiv {position: absolute; z-index: 1000; overflow-x: hidden; border-left: 1 solid #000000; border-bottom: 1 solid #000000; border-right: 1 solid #000000; SCROLLBAR-FACE-COLOR: # d0dff7; SCROLLBAR-HIGHLIGHT-COLOR: # d0dff7; SCROLLBAR-SHADOW-COLOR: # FFFFFF; SCROLLBAR-3DLIGHT-COLOR: # FFFFFF; SCROLLBAR-ARROW-COLOR: # ffffff; SCROLLBAR-TRACK-COLOR: # ffffff: # d0dff7 ;}</style> <p> <br/> <style>. select {border: 0 inset buttonface; width: 100; font: icon; cursor: default ;}. selected {border: 0 inset buttonface; background: window; padding: 0; font: icon ;}. selectTable {height: 100%; width: 100%; border: 2 inset buttonhighlight; background: buttonface ;}. option {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100% ;}. dropDown {position: absolute; visibility: hidden; width: 100%; border: 1 solid windowtext; padding: 0; background: window ;}. select. button {width: 16px; height: 5; font-family: webdings; padding: 0; font-size: 11px; border: 2 outset buttonhighlight ;}</style> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> </title> <br/> <style type =" text/css "> <! --. N1 {border-right: 1px none #999999; border-top: 1px solid #999999; border-bottom: 1px solid # DBDBDB; border-left: 1px solid #999999; cursor: default; width: 80px }. n2 {background: url (http://www.blueidea.com/bbs/images/newwin.gif) no-repeat center; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid # DBDBDB; border-left: 1px none; width: 18px; curso R: default ;}. ss {color: # FFFFFF; background: # 0A246A;} --> </style> <style> BODY {SCROLLBAR-FACE-COLOR: # d80000; SCROLLBAR-HIGHLIGHT-COLOR: # javasfc; SCROLLBAR-SHADOW-COLOR: #24fc90; SCROLLBAR-ARROW-COLOR: # fcfc48; SCROLLBAR-TRACK-COLOR: #002400; SCROLLBAR-DARKSHADOW-COLOR: #00b448; SCROLLBAR-BASE-COLOR: # fc0000 }</style> <p> <br/> <style type = "text/css"> <! -- Table {font-size: 9pt ;} --> </style> <table width = "98" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td width = "98" nowrap> <input name = "text1" type = "text" size = "10" class = "n1" readonly value = "select" onclick = "turnit (bb) "> <input name =" Submit "type =" text "class =" n2 "value =" "readonly onclick =" turnit (bb) "> </td> </tr> <td id =" bb "style =" display: none "> <table width =" 100% "border =" 0 "cellpadding =" 0 "cellspacing =" 0 "id =" tb "> <tr> <td id =" t1 "onmouseover =" over (this) "onmouseout =" out (this) "onclick =" sele (this) "> select 1 </td> </tr> <td id =" t2 "onmouseover =" over (this) "onmouseout =" out (this) "onclick =" sele (this) "> select 2 </td> </tr> <td id =" t3 "onmouseover =" over (this) "onmouseout =" out (this) "onclick =" sele (this) "> select 3 </td> </tr> </table> <p>