HTML裡select的CSS樣式的改變

本以為可以很簡單的在CSS裡像input那樣的給解決，結果沒想到試了一下才知道常規的CSS根本沒法改變的select樣式，CSS裡怎麼弄，select都仍然是預設的那三維的樣式。於是在網上搜尋了一下，才知道，原來這個select是不能用常規的方法來定義CSS樣式的。要用特殊的方法來處理。相信有很多朋友在處理網頁的時候都會遇到這個問題，於是找了一篇不錯的文章轉過來，希望對大家有協助————

首先要告訴大家，如果你是用css的方法，除了箭頭部分，其他都可以改變，這是很令人彆扭的事，因為其他的樣式改了，箭頭部分改不了等於無用。
下面舉個css改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>網站的封面<br /></option><option value="031113">上海夏天(一一友情提供)<br /></option><option value="031106">上海夏天(一)<br /></option><option value="030916">上海夏天出版了<br /></option><option value="031018">在雨中(二)<br /></option><option value="030915">開往黎明的地鐵(二)<br /></option><option value="030913">開往黎明的地鐵<br /></option><option value="031029">親愛的你們在幹什麼<br /></option><option value="000000">更多封面……<br /></option></select><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

如果你想徹底的改變select的樣子，有一種方法是用htc，但它有個缺點就是除了ie核心的，其他的他不支援。
舉個例子，如下： 下載此檔案
第二種方法就是用js，這其實是類比select的效果，代碼如下：<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; SCROLLBAR-DARKSHADOW-COLOR: #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 全選 注:如需引入外部Js需重新整理才能執行]

<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 center; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #DBDBDB; border-left: 1px none; width: 18px; cursor: default; } .ss { color: #FFFFFF; background: #0A246A; } --> </style><style> BODY { SCROLLBAR-FACE-COLOR: #d80000; SCROLLBAR-HIGHLIGHT-COLOR: #0000fc; 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="請選擇" onclick="turnit(bb)"><input name="Submit" type="text" class="n2" value="" readonly onclick="turnit(bb)"></td></tr><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)">選擇1</td></tr><tr><td id="t2" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">選擇2</td></tr><tr><td id="t3" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">選擇3</td></tr></table></td></tr></table><p>