HTML_Form 특수 효과에서 선택의 CSS 스타일 변경

입력처럼 CSS에서 쉽게 해결할 수 있다고 생각했지만, CSS에서 어떻게 하든 선택 스타일을 변경할 수 없다는 것을 시도한 후에는 찾을 수 없을 것이라고 예상했습니다. 기본 입체 스타일. 그래서 인터넷을 검색해 보니 이 선택 항목은 기존 방법으로는 CSS 스타일로 정의할 수 없다는 것을 알게 되었습니다. 특별한 방법으로 처리해야 합니다. 많은 친구들이 웹페이지를 다룰 때 이런 문제를 겪게 될 것이라 생각해서 좋은 글을 찾아 전달해 드렸습니다. 모든 분들께 도움이 되었으면 좋겠습니다————

우선 하고 싶습니다. CSS 방식으로 사용하면 화살표 부분만 제외하면 다 변경될 수 있다고 하는데, 다른 스타일을 변경하면 화살표 부분은 변경할 수 없어 쓸모가 없기 때문에 매우 어색합니다.
다음은

을 선택하도록 CSS를 변경한 예입니다. <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>웹사이트 표지 </option> <option value="031113">상하이 썸머(Yiyi 제공) </option> <option value="031106">상하이 여름 (1) </option> <option value="030916">상하이 썸머 출간 </option> <option value="031018">비 속에서 (2) </option> <option value="030915">새벽으로 향하는 지하철 (2) </option> <option value="030913">새벽행 지하철 </option> <option value="031029">지금 뭐하고 계시나요? </option> <option value="000000">더 많은 표지… </option></select></div></div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

완전히 바꾸고 싶은 경우 select의 경우 htc를 사용하는 방법이 하나 있는데, ie 커널 외에는 지원하지 않는다는 단점이 있다.
예를 들어 다운로드 주소는 다음과 같습니다. 이 파일을 다운로드하세요
두 번째 방법은 js를 사용하는 것으로 실제로 select의 효과를 시뮬레이션하는 코드는 다음과 같습니다.

<title>제목 없는 문서</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>