快捷導(dǎo)航

HTML里select的CSS樣式的改變

更新時間：2006年10月28日 00:00:00 作者：

本以為可以很簡單的在CSS里像input那樣的給解決，結(jié)果沒想到試了一下才知道常規(guī)的CSS根本沒法改變的select樣式，CSS里怎么弄，select都仍然是默認(rèn)的那三維的樣式。于是在網(wǎng)上搜索了一下，才知道，原來這個select是不能用常規(guī)的方法來定義CSS樣式的。要用特殊的方法來處理。相信有很多朋友在處理網(wǎng)頁的時候都會遇到這個問題，于是找了一篇不錯的文章轉(zhuǎn)過來，希望對大家有幫助————

首先要告訴大家，如果你是用css的方法，除了箭頭部分，其他都可以改變，這是很令人別扭的事，因為其他的樣式改了，箭頭部分改不了等于無用。
下面舉個css改select的例子

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

如果你想徹底的改變select的樣子，有一種方法是用htc，但它有個缺點就是除了ie內(nèi)核的，其他的他不支持。
舉個例子，下載地址如下：下載文件

下載此文件
第二種方法就是用js，這其實是模擬select的效果，代碼如下：

<html> <head> <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>  </head> <body>   <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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css">  </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>  <style type="text/css">  </style> </head> <body> <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><div   class="wppm3vysvbp"   id="Layer1" style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" class="n1" > <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> </div></td> </tr> </table> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: