漂亮的下拉列表 select样式 css处理 特效

最新推荐文章于 2024-09-10 13:54:44 发布
最新推荐文章于 2024-09-10 13:54:44 发布
阅读量1.6w 收藏 1
点赞数 2
分类专栏： html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Select Demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
BODY {
BACKGROUND: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif
}
#uboxstyle .select_box {
WIDTH: 250px; HEIGHT: 24px
}
#uboxstyle DIV.tag_select {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) no-repeat 0px 0px; PADDING-BOTTOM: 0px; WIDTH: 230px; COLOR: #79a2bd; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}
#uboxstyle DIV.tag_select_hover {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) no-repeat 0px -24px; PADDING-BOTTOM: 0px; WIDTH: 230px; COLOR: #79a2bd; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}
#uboxstyle DIV.tag_select_open {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) no-repeat 0px -48px; PADDING-BOTTOM: 0px; WIDTH: 230px; COLOR: #79a2bd; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}
#uboxstyle UL.tag_options {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) no-repeat right bottom; PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 250px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute
}
#uboxstyle UL.tag_options LI {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) repeat-y -250px 0px; PADDING-BOTTOM: 0px; WIDTH: 230px; COLOR: #79a2bd; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px; TEXT-DECORATION: none
}
#uboxstyle UL.tag_options LI.open_hover {
BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) no-repeat 0px -72px; COLOR: #fff
}
#uboxstyle UL.tag_options LI.open_selected {
BACKGROUND: url(http://www.geekso.com/attachment/ubox-select.gif) no-repeat 0px -96px; COLOR: #fff
}
</STYLE>
<SCRIPT>
var selects = document.getElementsByTagName('select');
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;
function $(id) {
return document.getElementById(id);
}
function stopBubbling (ev) { 
ev.stopPropagation();
}
function rSelects() {
for (i=0;i<selects.length;i++){
    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);
    if (isIE){
      selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;");
    }
    else if(!isIE){
      selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')");
      selects[i].addEventListener("click", stopBubbling, false);
    }    
}
}

function rOptions(i, name) {
var options = selects[i].getElementsByTagName('option');
var options_ul = 'options_' + name;
for (n=0;n<selects[i].options.length;n++){ 
    option_li = document.createElement('li');
      option_li.style.cursor='pointer';
      option_li.className='open';
    $(options_ul).appendChild(option_li);
    option_text = document.createTextNode(selects[i].options[n].text);
    option_li.appendChild(option_text);
    option_selected = selects[i].options[n].selected;
    if(option_selected){
      option_li.className='open_selected';
      option_li.id='selected_' + name;
      $('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));
    }
    
    option_li.onmouseover = function(){ this.className='open_hover';}
    option_li.onmouseout = function(){
      if(this.id=='selected_' + name){
        this.className='open_selected';
      }
      else {
        this.className='open';
      }
    }
    option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')");
}
}
function mouseSelects(name){
var sincn = 'select_info_' + name;
$(sincn).onmouseover = function(){ if(this.className=='tag_select') this.className='tag_select_hover'; }
$(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; }
if (isIE){
    $(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;");
}
else if(!isIE){
    $(sincn).onclick = new Function("clickSelects('"+name+"');");
    $('select_info_' +name).addEventListener("click", stopBubbling, false);
}
}
function clickSelects(name){
var sincn = 'select_info_' + name;
var sinul = 'options_' + name;
for (i=0;i<selects.length;i++){ 
    if(selects[i].name == name){        
      if( $(sincn).className =='tag_select_hover'){
        $(sincn).className ='tag_select_open';
        $(sinul).style.display = '';
      }
      else if( $(sincn).className =='tag_select_open'){
        $(sincn).className = 'tag_select_hover';
        $(sinul).style.display = 'none';
      }
    }
    else{
      $('select_info_' + selects[i].name).className = 'tag_select';
      $('options_' + selects[i].name).style.display = 'none';
    }
}
}
function clickOptions(i, n, name){    
var li = $('options_' + name).getElementsByTagName('li');
$('selected_' + name).className='open';
$('selected_' + name).id='';
li[n].id='selected_' + name;
li[n].className='open_hover';
$('select_' + name).removeChild($('select_info_' + name));
select_info = document.createElement('div');
    select_info.id = 'select_info_' + name;
    select_info.className='tag_select';
    select_info.style.cursor='pointer';
$('options_' + name).parentNode.insertBefore(select_info,$('options_' + name));
mouseSelects(name);
$('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML));
$( 'options_' + name ).style.display = 'none' ;
$( 'select_info_' + name ).className = 'tag_select';
selects[i].options[n].selected = 'selected';
}
window.onload = function(e) {
bodyclick = document.getElementsByTagName('body').item(0);
rSelects();
bodyclick.onclick = function(){
    for (i=0;i<selects.length;i++){ 
      $('select_info_' + selects[i].name).className = 'tag_select';
      $('options_' + selects[i].name).style.display = 'none';
    }
}
}
</SCRIPT>
<META content="MSHTML 6.00.2900.3199" name=GENERATOR>
</HEAD>
<BODY>
<FORM id=form name=form action="" method=post>
<BR>
<BR>
<DIV id=uboxstyle>
    <SELECT id=language name=language>
      <OPTION value=English selected>请选择。</OPTION>
      <OPTION value=简体中文>简体中文</OPTION>
      <OPTION value=日本語>日本語</OPTION>
      <OPTION value=http://www.geekso.com>这一技客</OPTION>
    </SELECT>
</DIV>
<BR>
<BR>
</DIV> 
</FORM>
</BODY>
</HTML>


 

peter_666
关注
专栏目录
完爆默认样式，好看的select下拉框（带搜索功能）
w_____w_____的博客
11-15 6028
标配版 豪华搜索版 这个是利用input框和ul来实现一个下拉框的效果。 具体代码如下 不带搜索： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .selectBox{ width: 300px; height: 36px; line-heig
html select样式优化,jQuery+CSS实现select列表菜单表单样式美化
weixin_35778830的博客
06-03 586
DIV+CSS+jQuery表单美化SELECT列表菜单方法与代码SELECT下拉列表菜单美化效果截图-SELECT美化后的列表菜单表单控件效果图我们使用CSS控制表单输入框样式美化没问题、CSS设置按钮表单样式没问题，比较头疼的是一般CSS是不能单纯像输入框、按钮设置美化，单纯使用CSS美化html SELECT无效，至少IE6、IE7等浏览器不支持CSS样式美化。这个时候divcss5整理一个...
select 漂亮样式
06-22
select的漂亮样式，完全div+css+js实现，更易懂，更清晰
一款非常好看下拉框样式(select)
09-27
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
HTML5中下拉框标签`＜select＞`深入全面解析
最新发布
软考鸭
09-10 3328
下拉框作为HTML5表单的重要元素，其默认样式和功能可能无法满足所有开发者的需求。通过深入了解标签的属性、样式定制方法，以及结合CSS和JavaScript的高度定制技巧，开发者可以创建出符合项目需求、用户体验优良的下拉框组件。希望本文能为开发者在使用和定制下拉框时提供有益的参考。
好看的select下拉框样式收集
热门推荐
糖糖糖糖糖糖分
02-20 2万+
1.jQselectable 演示
CSS自定义select下拉选择框的样式(不用其他标签模拟)
02-01
怎么自定义select下拉选择框的样式，使用纯CSS实现，把浏览器默认的样式覆盖掉还是有其他的方法，select靠纯CSS是不能解决这个自定义样式问题，下面为大家讲解下CSS实现的思路
javascript 模拟select下拉列表特效
10-30
因此，为了实现更为灵活和可定制化的下拉列表特效，开发者们通常会采用JavaScript来模拟select下拉列表的行为，同时使用CSS来控制下拉列表的视觉表现。 在本例中，我们首先可以看到使用了HTML标签来设置网页的字符...
jquery+css3美化select下拉列表框特效
08-05
在网页设计中，"jquery+css3美化select下拉列表框特效"是一个常见的需求，它旨在提升用户体验，使传统的HTML `<select>` 元素看起来更加现代和吸引人。本项目结合了JavaScript库jQuery和CSS3的新特性，为下拉列表框...
jQuery和css3超赞select下拉列表框美化插件
12-11
**jQuery和CSS3超赞Select下拉列表框美化插件详解** 在网页设计中，Select元素通常是用来创建下拉选择菜单的，但其默认样式在许多浏览器中并不统一，有时显得较为简陋。为了提升用户体验和界面美观度，开发者经常...
css下拉框select自定义样式
☆╮123☆
10-26 2603
注意：外层标签的宽度要大于下拉框的宽度 标签：                                    套餐A                     套餐B                     套餐B                                 样式： .mask_box .styled-select {
一款非常漂亮的表单select下拉框样式
10-26
一款非常漂亮的表单select下拉框样式 示例地址：http://blog.csdn.net/homezzm/archive/2009/10/26/4729057.aspx
css 设置下拉列表 select 样式
03-16
NULL 博文链接：https://jiangpan.iteye.com/blog/419038
精美漂亮的实用div+css模仿select下拉框控件
03-01
基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
纯Css更改Select下拉框样式
03-04
纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的
如何让select的样式也漂亮起来
志超的专栏
09-07 1万+
转自http://writeblog.csdn.net/PostEditPlain.aspx如何让select的样式也漂亮起来<!--.select * { margin: 0; padding: 0;}.select { border:1px solid #cccccc; float: left; display: inline;
JS+CSS美化的漂亮Select列表框
11-07 2367
JS+CSS美化的漂亮Select列表框 body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;} #uboxstyle .select_box{width:100px;height:24px;} #macstyle .select_box{width:9
select 样式美化
weixin_47180815的博客
05-11 908
【代码】select 样式美化。
纯CSS select 下拉框美化
The Home Of Salt Fish
05-31 8959
<style> body { font-size: 20px; color: #090; background-color: #eee; text-align: center; } .select { display: inline-block; width: 300px; position: relative; vertical-align: middle; padding: 0; overflow: hidden; background-co.
HTML5下拉列表搜索特效代码实现与应用
而"CSS特效"则说明代码中包含了针对样式和动画效果的CSS代码，这些特效能够使下拉列表的交互更加直观和美观。"网页特效"进一步强调了这些代码不仅仅包含基本的搜索和下拉功能，还包括了增强用户体验的视觉和交互特效...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值