制作网页时，表单元素的样式是个比较不容易控制的。很多css属性对表单元素是不支持的，比如我们这里说的下拉列表菜单（select）元素。
这里我们讲解下select元素样式的控制，这里用的是javascript方法，用javascript实现功能，用css样式控制表现，所以说，你要你css够牛，你可以做成任何样子！
?
下面是一个典型的select元素：
<select name="language">
??<option value="English"? selected="selected">English</option>
??<option value="简体中文" >简体中文</option>
??<option value="日本遮" >日本遮</option>
??<option value="Deutsch" >Deutsch</option>
??<option value="Espa?ol" >Espa?ol</option>
??<option value="Fran?ais" >Fran?ais</option>
??<option value="Italiano" >Italiano</option>
?</select>
?
然后引入javascript文件：
文件在文章后面可以下载，这里我介绍下：
var selects = document.getElementsByTagName('select');
这里找到网页中的select标签，然后在一个函数中动态创建标签：
selects[i].style.display = 'none';
??select_tag = document.createElement('div');
???select_tag.id = 'select_' + selects[i].name;
???select_tag.className = 'select_box';
??selects[i].parentNode.insertBefore(select_tag,selects[i]);
??select_info = document.createElement('div');?
???select_info.id = 'select_info_' + selects[i].name;
???select_info.className='tag_select';
???select_info.style.cursor='pointer';
??select_tag.appendChild(select_info);
??select_ul = document.createElement('ul');?
???select_ul.id = 'options_' + selects[i].name;
???select_ul.className = 'tag_options';
???select_ul.style.position='absolute';
???select_ul.style.display='none';
???select_ul.style.zIndex='999';
??select_tag.appendChild(select_ul);
??rOptions(i,selects[i].name);
??
??mouseSelects(selects[i].name);
?
注意，虽然这里用javascript创建了标签，但是此时并没有赋予元素任何样式，样式完全是css文件控制的：
?
#uboxstyle .select_box{width:100px;height:24px;}
#uboxstyle div.tag_select{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("../images/ubox-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}
#uboxstyle div.tag_select_hover{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("../images/ubox-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}
#uboxstyle div.tag_select_open{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("../images/ubox-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}
#uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;background:transparent url("../images/ubox-select.gif") no-repeat right bottom;width:100px;padding:0 0 5px;margin:0;}
#uboxstyle ul.tag_options li{background:transparent url("../images/ubox-select.gif") repeat-y -100px 0;display:block;width:80px;padding:0 10px;height:24px;text-decoration:none;line-height:24px;color:#79A2BD;}
#uboxstyle ul.tag_options li.open_hover{background:transparent url("../images/ubox-select.gif") no-repeat 0 -72px;color:#fff}
#uboxstyle ul.tag_options li.open_selected{background:transparent url("../images/ubox-select.gif") no-repeat 0 -96px;color:#fff}
?
注意我这里讲解下：
select_box 是整个下来的元素。
div.tag_select 是没有下拉时显示的部分。
ul.tag_options 是下拉部分，相当于option元素。
有了这些，相信这个例子就可以明白，并进行相应的修改了。
?
这里我给出源文件，方面大家学习。
?
?