本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式。于是在网上搜索了一下,才知道,原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题,于是找了一篇不错的文章转过来,希望对大家有帮助————
首先要告诉大家,如果你是用css的方法,除了箭头部分,其他都可以改变,这是很令人别扭的事,因为其他的样式改了,箭头部分改不了等于无用。
下面举个css改select的例子
如果你想彻底的改变select的样子,有一种方法是用htc,但它有个缺点就是除了ie内核的,其他的他不支持。
举个例子,下载地址如下:
下载此文件第二种方法就是用js,这其实是模拟select的效果,代码如下:
\n';
str += '\n';
return str;
}
function createXString(matrix, id, size, onchange, css) {
var str = '
\n';
return str;
}
function stripTags(str) {
var s = 0;
var e = -1;
var r = "";
s = str.indexOf("<",e);
do {
r += str.substring(e + 1,s);
e = str.indexOf(">",s);
s = str.indexOf("<",e);
}
while ((s != -1) && (e != -1))
r += str.substring(e + 1,str.length);
return r;
}
function Option(html, value, css, selected) {
this.html = html;
this.value = value;
this.css = css;
this.selected = selected;
}
</script>
<script type="text/javascript">
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;");
</script>
<script type="text/javascript">
writeSelectBox(optionArray, "select3", 3, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");
</script>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]