css添加b0rder,HTML里select的CSS样式的改变

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

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

下面举个css改select的例子

.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;}

网站的封面

上海夏天(一一友情提供)

上海夏天(一)

上海夏天出版了

在雨中(二)

开往黎明的地铁(二)

开往黎明的地铁

亲爱的你们在干什么

更多封面……

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

如果你想彻底的改变select的样子，有一种方法是用htc，但它有个缺点就是除了ie内核的，其他的他不支持。

举个例子，下载地址如下：

下载此文件

第二种方法就是用js，这其实是模拟select的效果，代码如下：

Untitled Document

.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;}

document.οnclick=hiddenDiv;

function getDivCount() {

var arr=document.all;

re=0;

for (i=0;i200){

sv.style.pixelHeight=200;

sv.style.overflowY='scroll';

}

else {

sv.style.pixelHeight=da.offsetHeight;

sv.style.overflowY='hidden';

}

}

function dropDown(ID){

var sv=document.all["ZfDiv_"+ID]

var tb=document.all["ZfData_"+ID]

if(sv.style.display=='none'){

sv.style.display='';

for(i=0;i'+v.Trim()+'';

c.οnmοuseοver=new Function("over(this)");

c.οnmοuseοut=new Function("out(this)");

c.οnclick=new Function("setValue(this)");

c.className="td_out";

v='';

}

//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空

function addText(name,DefValue) {

var i=getDivCount();

document.write('');

document.write('" οnclick="this.hideFocus=true;dropDown('+i+');" class="down" οnmοuseοver="this.style.backgroundColor=#EEF3FD" οnmοuseοut="this.style.backgroundColor=\'\'" οnmοusedοwn="this.style.backgroundColor=#ABC4F5" οnmοuseup="this.style.backgroundColor=\'\'">');

document.write('

');

}

addText("name1","a");

add("1234",0);

add("1234",0);

addText("name1","a");

add("1234",1);

add("1234",1);

.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;}

var overOptionCss = "background: highlight; color: highlighttext";

var sizedBorderCss = "2 inset buttonhighlight";

var globalSelect;

var ie4 = (document.all != null);

var q = 0;

function initSelectBox(el) {

copySelected(el);

var size = el.getAttribute("size");

el.options = el.children[1].children;

el.selectedIndex = findSelected(el);

el.remove = new Function("i", "int_remove(this,i)");

el.item = new Function("i", "return this.options[i]");

el.add = new Function("e", "i", "int_add(this, e, i)");

el.options[el.selectedIndex].selected = true;

dropdown = el.children[1];

if (size != null) {

if (size > 1) {

el.size = size;

dropdown.style.zIndex = 0;

initSized(el);

}

else {

el.size = 1;

dropdown.style.zIndex = 99;

if (dropdown.offsetHeight > 200) {

dropdown.style.height = "200";

dropdown.style.overflow = "auto";

}

}

}

highlightSelected(el,true);

}

function int_remove(el,i) {

if (el.options[i] != null)

el.options[i].outerHTML = "";

}

function int_add(el, e, i) {

var html = "

";

if (e.text != null)

html += e.text;

html += "

"

if ((i == null) || (i >= el.options.length))

i = el.options.length-1;

el.options[i].insertAdjacentHTML("AfterEnd", html);

}

function initSized(el) {

var h = 0;

el.children[0].style.display = "none";

dropdown = el.children[1];

dropdown.style.visibility = "visible";

if (dropdown.children.length > el.size) {

dropdown.style.overflow = "auto";

for (var i=0; i\n';

str += '

\n';

str += '

\n';

str += '

\n';

str += '

\n';

str += '6

\n';

str += '

\n';

str += '

\n';

str += '

\n';

for (var i=0; i\n';

str += html;

str += '

\n';

}

str += '

\n';

str += '\n';

return str;

}

function createXString(matrix, id, size, onchange, css) {

var str = '\n';

str += '\n';

for (var i=0; i';

str += stripTags(html);

str += '\n';

}

str += '\n\n';

str += '\n';

return str;

}

function stripTags(str) {

var s = 0;

var e = -1;

var r = "";

s = str.indexOf("",s);

s = str.indexOf("

var optionArray = new Array();

optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");

optionArray[1] = new Option("Item 2", "value 2");

optionArray[2] = new Option("Item 3", "value 3", "color: red;", "selected");

optionArray[3] = new Option("Item 4", "value 4");

optionArray[4] = new Option("Item 5", "value 5");

writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");

writeSelectBox(optionArray, "select3", 3, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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;

}

-->

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

}

function turnit(ss)

{

if (ss.style.display=="none")

{ss.style.display="";

}

else

{ss.style.display="none";

}

}

function sele(tid)

{

bb.style.display='none';

text1.value=tid.innerText;

}

function over(tid)

{

for (var i=1;i

选择1

选择2

选择3

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间： 2006-10-25