HTML里select的CSS样式的改变

本以为可以很简单的在CSS里像input那样的给解决，结果没想到试了一下才知道常规的CSS根本没法改变的select样式，CSS里怎么弄，select都仍然是默认的那三维的样式。于是在网上搜索了一下，才知道，原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题，于是找了一篇不错的文章转过来，希望对大家有帮助————

首先要告诉大家，如果你是用css的方法，除了箭头部分，其他都可以改变，这是很令人别扭的事，因为其他的样式改了，箭头部分改不了等于无用。
下面举个css改select的例子

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
如果你想彻底的改变select的样子，有一种方法是用htc，但它有个缺点就是除了ie内核的，其他的他不支持。
举个例子，下载地址如下：下载此文件
第二种方法就是用js，这其实是模拟select的效果，代码如下：

<html> <head> <title>Untitled document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <sty1e> .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>   <sty1e> .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需再刷新一下页面才能执行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <sty1e type="text/css">  </style> <sty1e> 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>  <sty1e 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> <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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

HTML里select的CSS样式的改变

JavaScript相关栏目本月热门文章