Changes to the CSS style of select in HTML_Form special effects

I thought it could be easily solved in CSS like input, but I didn’t expect to find out after trying it that the select style cannot be changed by regular CSS. No matter how I do it in CSS, the select style is still the default three-dimensional style. . So I searched on the Internet and found out that this selection cannot be defined in CSS style using conventional methods. It needs to be handled in a special way. I believe that many friends will encounter this problem when dealing with web pages, so I found a good article and forwarded it. I hope it will be helpful to everyone————

First of all, I want to tell you that if you use In the css method, except for the arrow part, everything else can be changed. This is very awkward, because if other styles are changed, the arrow part cannot be changed, which means it is useless.
The following is an example of changing css to select

<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> <div class="box"><div class="box2"><select hidefocus> <option selected>Website cover </option> <option value="031113">Shanghai Summer (courtesy provided by Yiyi) </option> <option value="031106">Shanghai Summer (1) </option> <option value="030916">Shanghai Summer is published </option> <option value="031018">In the rain (2) </option> <option value="030915">The subway bound for dawn (2) </option> <option value="030913">The subway bound for Dawn </option> <option value="031029">Dear what are you doing? </option> <option value="000000">More covers… </option></select></div></div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

If you want to make a complete change As for select, one method is to use htc, but its disadvantage is that it does not support other than the ie kernel.
For example, the download address is as follows: Download this file
The second method is to use js, which actually simulates the effect of select. The code is as follows:

<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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; SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;} </style> <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>