当前位置: 代码迷 >> Web前端 >> select式样美化
  详细解决方案

select式样美化

热度:245   发布时间:2012-11-05 09:35:12.0
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元素。

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

?

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

?

?

  相关解决方案