select样式美化

制作网页时，表单元素的样式是个比较不容易控制的。很多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元素。

有了这些，相信这个例子就可以明白，并进行相应的修改了。

 

这里我给出源文件，方面大家学习。