起因是在实践中发现input的高度无法改变，也就是说再怎么调整，他的四周都会有空隙，当然只作用于IE，如果调整一下的话，FF下效果又不理想，没有什么好的解决方法，除非用图片模拟，为了追求完美，模拟就模拟吧。
本人习惯用jQuery，于是就找到了nicejform，专门用来美化表单的jquery插件。（我知道坛子上有相关的文章，我也参考过，但是美化不是我的强项，所以就想找现成的）
效果查看
看源码，可以发现没有另外添加样式，id之类的，所以如果不用这个插件了，页面也无需改动
众所周知，表单美化里面select是最不好模拟的，同样nicejforms也没有很好的模拟，那就自己动手改造吧。
3个半小时过去后......
终于被我征服了，彻底地模拟美化了select表单，可以说功能上一点都不差，修改了原版本的一些不足
- 点击页面空白处，弹出的options不能缩回
- 无法设置option的value值，一律都是"#"
- 由于都设置为了"#"，所以如果select放置到了页面的下方，选择后会回到页面顶部
现在这些问题全都解决了，可以正式派上用场了，oh，yeah！
效果查看
点击下载修改后的文件
-------------------------------------------------------------------------------------------------------------------------------------------------
10.1日添加
其实上面那个select美化有一个非常大的问题，不过好像没有人注意到，就是当页面载入完后，在页面的底部会出现这些选项，这次重新操刀，不再是对原插件的修修补补，自己重新写了code。
特点：
- 仅IE有效，FF下保持原状
- 不接受键盘响应，所以上下键无效，滚轴也无效
- 其他的应该都模仿的差不多了
由于前台编程也只是我的业余爱好，所以更加细致的模仿，只能靠大家了。
其实我自己也觉得写这么一堆未必有用，但是既然都写出来了，还是放上来吧，有用没用让大家来评价。
浏览地址：
http://www.live-my-life-with-yuyi.com/lab/jquery/form_select/
代码：
复制内容到剪贴板
代码:
if($.browser.msie)
$(document).ready(function(){
//对每一个select进行美化
$("select").each(function(){
select_name = $(this).attr("name");
//取得select的高度
width = $(this).width();
//取得input的宽度
input_width = width-17;
//取得绝对坐标
offset = $(this).offset();
//美化的代码
select_html = '<div style="width:'+width+'px;position:absolute;left:'+offset.left+'px;top:'+offset.top+'px"><input type="text" style="width:'+input_width+'px;" autocomlete="off" readonly="true" id="input_'+select_name+'" class="select_input"/><img id="img_'+select_name+'" name="'+select_name+'" class="select_img" src="s.gif" width="17" height="21"></div>';
//附加到页面上
$("body").append(select_html);
$(this).css({visibility:"hidden"});
//$(this).css("margin","200px");
//取得option的数量
option_num = $("option",$(this)).length;
//option的高度
option_height = option_num * 21 > 200 ? 200 : option_num*21;
//option的宽度
option_width = width;
//option的坐标
option_left = offset.left;
option_top = offset.top+21;
//下拉菜单的美化代码
option_html = "<div class='select_option_div' id=option_"+select_name+" style='height:"+option_height+"px;width:"+option_width+"px;position:absolute;top:"+option_top+"px;left:"+option_left+"px;overflow:auto'>";
$(this).find("option").each(function(){
option_html += "<div class='select_option'>"+$(this).text()+"</div>";
});
option_html += "</div>";
//附加到页面上
$("body").append(option_html);
//隐藏选项
$("#option_"+select_name).hide();
//设定img id 和 input id
img_id = "#img_"+select_name;
input_id = "#input_"+select_name;
//设定图片点击事件
$(img_id).click(function(){
//通过name取得目标id
dest_id = "#option_"+$(this).attr("name");
//取得选项的状态是打开还是关闭
state = $(dest_id).css("display");
//关闭所有的选项
$(".select_option_div").hide();
//开的关，关的开
if(state == "none"){
$(dest_id).show();
}
else{
$(dest_id).hide();
}
});
//input的点击事件
$(input_id).click(function(){
//取得目标id
dest_id = $(this).attr("id").substr(6);
dest_id = "#option_"+dest_id;
state = $(dest_id).css("display");
$(".select_option_div").hide();
if(state == "none"){
$(dest_id).show();
//alert("hello");
}
else{
$(dest_id).hide();
}
});
//设置默认选中的项
obj = document.getElementById(select_name);
input_id = "#input_"+select_name;
$(input_id).val(obj.options[obj.selectedIndex].text);
});
//当点击选项后的操作
$(".select_option").click(function(){
//取得select id
parent_id = $(this).parent().attr("id");
parent_id = parent_id.substr(7);
input_id = "#input_"+parent_id;
//在input处显示所选项
$(input_id).val($(this).text());
//操作select选项
obj = document.getElementById(parent_id);
obj.options[obj.selectedIndex].text=$(this).text();
option_id = "#option_"+parent_id;
//选中之后隐藏选项
$(option_id).hide();
});
//对option选项应用鼠标移入移出效果
$(".select_option").hover(function(){$(this).addClass("select_highlight")},function(){$(this).removeClass("select_highlight")});
});
//点击页面函数
$(document).click(function(evt){
var evt = evt || window.event; // event object
var target = evt.target || window.event.srcElement; // event target
var t_className = target.className; // event target id
if(t_className == "select_img" || t_className == "select_input" || t_className == "select_option"){
return false;
}
else{
$(".select_option_div").hide();
};
});[
本帖最后由 lzyy 于 2007-10-1 20:51 编辑 ]
