css模拟实现
此方法来自已经不存在的苏小雨2003版个人主页，通过2个容器模拟，并定义select偏移。第一次看到确实很惊艳。
#sel_exterior { border:#366 1px solid; overflow:hidden; width:73px; clip:rect(0px 181px 18px 0px); height:20px;}
#sel_inside { border:#f3f3f3 1px solid; overflow:hidden; width:71px; clip:rect(0px 179px 16px 0px); height:18px}
select#sel { font-size:12px; text-align:center; width:74px; color:#666; line-height:14px; position:relative; top:-2px; left:-2px;}
#sel_inside { border:#f3f3f3 1px solid; overflow:hidden; width:71px; clip:rect(0px 179px 16px 0px); height:18px}
select#sel { font-size:12px; text-align:center; width:74px; color:#666; line-height:14px; position:relative; top:-2px; left:-2px;}
HTC绑定CSS到select后，可以进行批量渲染，没有定义宽度，所以option内文字长度自适应。
<PUBLIC:ATTACH EVENT=”ondocumentready” ONEVENT=”select_ready()” />
<script language=”JavaScript“>
function select_ready() {
if (this.style.position != ‘relative’) {
this.style.fontSize = 12;
this.style.position = ‘relative’;
this.style.left = -2;
this.style.top = -2;
var w = this.clientWidth – 1;
var h = this.clientHeight – 1;
this.outerhtml = ‘<span style=”border: 1px solid #366; height: ‘ + h + ‘; width: ‘ + w + ‘;”><div style=”border: 1 solid #f3f3f3; overflow: hidden; width: ‘ + (w-2) + ‘; height: ‘ + (h-2) + ‘”>’ + this.outerHTML + ‘</div></span>’;
}
}
</script>
<script language=”JavaScript“>
function select_ready() {
if (this.style.position != ‘relative’) {
this.style.fontSize = 12;
this.style.position = ‘relative’;
this.style.left = -2;
this.style.top = -2;
var w = this.clientWidth – 1;
var h = this.clientHeight – 1;
this.outerhtml = ‘<span style=”border: 1px solid #366; height: ‘ + h + ‘; width: ‘ + w + ‘;”><div style=”border: 1 solid #f3f3f3; overflow: hidden; width: ‘ + (w-2) + ‘; height: ‘ + (h-2) + ‘”>’ + this.outerHTML + ‘</div></span>’;
}
}
</script>
不支持standard模式，支持IE6.0和FF1.5
效果演示：http://www.rexsong.com/blog/attachments/200605/29_223027_select_css.htm
DHTML模拟实现
此方法来自cisco首页，用了图片，又费了N多功夫实现。这是提取并整理出来的代码，首次加载还有点问题。
不支持standard模式，支持IE6.0和FF1.5
效果演示：http://www.rexsong.com/blog/attachments/200605/29_223032_select_dhtml.htm
欢迎大家阅读《美化与模拟Select_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：美化与模拟Select_css
转载请注明原文链接：美化与模拟Select_css
