用CSS控制Select的风格

最新推荐文章于 2024-09-03 08:45:57 发布
最新推荐文章于 2024-09-03 08:45:57 发布
阅读量504 收藏 1
点赞数
原文链接：http://www.cnblogs.com/easyjacky/archive/2008/01/26/1054276.html
版权
今天偶然在网上看到一个 用CSS控制Select风格的例子，感觉比较好，用到的有些技术细节也是我之前不知道的，特摘录如下：

SelectDemo.htm:
<! 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" />
     < link  href ="selectDemo.css"  rel ="stylesheet"  type ="text/css"   />

     < script  src ="selectDemo.js"  type ="text/javascript" ></ script >

     < meta  content ="MSHTML 6.00.2900.3243"  name ="GENERATOR" />
</ head >
< body >
     < form  id ="form"  action =""  method ="post" >
         < br  />
         < br  />
         < div  id ="uboxstyle" >
             < h3  style ="font-size: 14px; color: #6d93ab" >
                U-Box Style </ h3 >
             < select  id ="language"  name ="language" >
                 < option  value ="English"  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 >
                 < option  value ="Polski" > Polski </ option >
                 < option  value ="Português" > Português </ option >
                 < option  value ="Svenska" > Svenska </ option >
                 < option  value ="Türkçe" > Türkçe </ option >
                 < option  value ="Руccкий" > Руccкий </ option >
             </ select >
         </ div >
         < br  />
         < br  />
         < h3  style ="font-size: 14px; color: #6d93ab" >
            Mac Style </ h3 >
         < div  id ="macstyle" >
             < select  id ="language_mac"  name ="language_mac" >
                 < option  value ="English"  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 >
                 < option  value ="Polski" > Polski </ option >
                 < option  value ="Português" > Português </ option >
                 < option  value ="Svenska" > Svenska </ option >
                 < option  value ="Türkçe" > Türkçe </ option >
                 < option  value ="Руccкий" > Руccкий </ option >
             </ select >
         </ div >
         < br  />
         < br  />
         < h3  style ="font-size: 14px; color: #6d93ab" >
            TM2008 Style </ h3 >
         < div  id ="tm2008style" >
             < select  id ="language_tm2008"  name ="language_tm2008" >
                 < option  value ="English"  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 >
                 < option  value ="Polski" > Polski </ option >
                 < option  value ="Português" > Português </ option >
                 < option  value ="Svenska" > Svenska </ option >
                 < option  value ="Türkçe" > Türkçe </ option >
                 < option  value ="Руccкий" > Руccкий </ option >
             </ select >
         </ div >
     </ form >
</ body >
</ html >

SelectDemo.css:
BODY  {} {
    BACKGROUND: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif
}
#uboxstyle .select_box  {} {
    WIDTH: 100px; HEIGHT: 24px
}
#macstyle .select_box  {} {
    WIDTH: 91px; HEIGHT: 24px
}
#tm2008style .select_box  {} {
    WIDTH: 102px; HEIGHT: 24px
}
#uboxstyle DIV.tag_select  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(ubox-select.gif) no-repeat 0px 0px; PADDING-BOTTOM: 0px; WIDTH: 80px; 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(ubox-select.gif) no-repeat 0px -24px; PADDING-BOTTOM: 0px; WIDTH: 80px; 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(ubox-select.gif) no-repeat 0px -48px; PADDING-BOTTOM: 0px; WIDTH: 80px; COLOR: #79a2bd; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}

#uboxstyle UL.tag_options  {} {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(ubox-select.gif) no-repeat right bottom; PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute
}
#uboxstyle UL.tag_options LI  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(ubox-select.gif) repeat-y -100px 0px; PADDING-BOTTOM: 0px; WIDTH: 80px; COLOR: #79a2bd; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px; TEXT-DECORATION: none
}
#uboxstyle UL.tag_options LI.open_hover  {} {
    BACKGROUND: url(ubox-select.gif) no-repeat 0px -72px; COLOR: #fff
}
#uboxstyle UL.tag_options LI.open_selected  {} {
    BACKGROUND: url(ubox-select.gif) no-repeat 0px -96px; COLOR: #fff
}
#macstyle DIV.tag_select  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(mac-select.gif) no-repeat 0px -24px; PADDING-BOTTOM: 0px; WIDTH: 71px; COLOR: #000; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}
#macstyle DIV.tag_select_hover  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(mac-select.gif) no-repeat 0px 0px; PADDING-BOTTOM: 0px; WIDTH: 71px; COLOR: #000; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}
#macstyle DIV.tag_select_open  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(mac-select.gif) no-repeat 0px -48px; PADDING-BOTTOM: 0px; WIDTH: 71px; COLOR: #000; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px
}
#macstyle UL.tag_options  {} {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(mac-select.gif) no-repeat left bottom; PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 71px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute
}
#macstyle UL.tag_options LI  {} {
    PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(mac-select.gif) repeat-y -91px 0px; PADDING-BOTTOM: 0px; WIDTH: 61px; COLOR: #000; LINE-HEIGHT: 24px; PADDING-TOP: 0px; HEIGHT: 24px; TEXT-DECORATION: none
}
#macstyle UL.tag_options LI.open_hover  {} {
    BACKGROUND: url(mac-select.gif) no-repeat -162px 0px; COLOR: #000
}
#macstyle UL.tag_options LI.open_selected  {} {
    BACKGROUND: url(mac-select.gif) no-repeat -162px -24px; COLOR: #fff
}
#tm2008style DIV.tag_select  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(tm2008-select.gif) no-repeat 0px 0px; PADDING-BOTTOM: 0px; WIDTH: 82px; COLOR: #000; LINE-HEIGHT: 22px; PADDING-TOP: 0px; HEIGHT: 22px
}
#tm2008style DIV.tag_select_hover  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(tm2008-select.gif) no-repeat 0px -22px; PADDING-BOTTOM: 0px; WIDTH: 82px; COLOR: #000; LINE-HEIGHT: 22px; PADDING-TOP: 0px; HEIGHT: 22px
}
#tm2008style DIV.tag_select_open  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(tm2008-select.gif) no-repeat 0px -44px; PADDING-BOTTOM: 0px; WIDTH: 82px; COLOR: #000; LINE-HEIGHT: 22px; PADDING-TOP: 0px; HEIGHT: 22px
}
#tm2008style UL.tag_options  {} {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(tm2008-select.gif) no-repeat left bottom; PADDING-BOTTOM: 1px; MARGIN: 0px; WIDTH: 80px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute
}
#tm2008style UL.tag_options LI  {} {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: url(tm2008-select.gif) repeat-y -102px 0px; PADDING-BOTTOM: 0px; WIDTH: 61px; COLOR: #000; LINE-HEIGHT: 22px; PADDING-TOP: 0px; HEIGHT: 22px; TEXT-DECORATION: none
}
#tm2008style UL.tag_options LI.open_hover  {} {
    BACKGROUND: url(tm2008-select.gif) no-repeat 0px -88px; COLOR: #000
}
#tm2008style UL.tag_options LI.open_selected  {} {
    BACKGROUND: url(tm2008-select.gif) no-repeat 0px -66px; COLOR: #19555f
}

SelectDemo.js:
/**/ /*#############################################################
Name: Select to CSS
Version: 0.2
Author: Utom
URL: http://utombox.com/
#############################################################*/
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';
        }
    }
}

背景图片：
      

转载于:https://www.cnblogs.com/easyjacky/archive/2008/01/26/1054276.html

CSS实现select样式
季诗筱的博客
04-12 2738
今天做的任务是写一个自适应的表单提交页面，要在移动端和PC端都使用，而且要浏览器兼容。在页面布局的时候遇到的问题是，我用的select下拉框，但是firefox和chrome的下拉框是不一样的，于是就想要自己重写一下。代码如下：select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #b6b6b6; border-r
css实现个性化select 下拉选择框(3种风格)
05-03
超级极品,自己手册,有3中下拉框选择风格,苹果风格,描边风格,凹凸风格,好东西就是贵点
CSS Select 指南：深入掌握选择器的力量
最新发布
gitblog_00101的博客
09-03 499
CSS Select 指南：深入掌握选择器的力量 css-selecta CSS selector compiler & engine项目地址:https://gitcode.com/gh_mirrors/cs/css-select 项目介绍 CSS Select 是一个专注于教授和理解 CSS 选择器原理及使用的开源项目。基于 fb55/css-select 的精神，本指南旨在帮助开发者更有效...
select风格.rar
07-24
select风格 用jquery实现input框当中的select类型 的样式
CSS选择器(select)
Lonelydesertea的博客
12-04 3941
■开发中经常需要找到特定的网页元素进行 ■什么是css选择器 设置样式 □按照一定的规则选出符合的元素,为之添加css样式 ■思考:如何找到特定的那个元素? ■ 选择器的种类繁多,大概可以这么归类 □ 通用选择器(universal selector) □ 元素选择器(type selectors) □ 类选择器(class selectors) □ id选择器(id selectors) □ 属性选择...
css select-style属性,beautifulsoupcss Select查找不存在特定属性（style for ex）的标记
weixin_30802819的博客
08-04 383
我第一次来这里。谢谢你帮了我们这么久。直截了当地说：场景：我正在开发一个现有的程序，它将CSS选择器作为一个字符串从配置文件中读取，从而使程序具有动态性，并且能够通过更改CSS选择器的配置值来废弃任何站点。在问题：我正在尝试抓取一个网站，它正在渲染项目作为以下两个选项之一：选项1：.........$299$195soup = soup.select("span.price") - this do...
用css控制select样式
管子（zero）的杂乱空间
12-14 1628
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;// -->http://www.corange.cn/archives/2
CSS怎么去掉select的下拉箭头样式
09-24
在本篇文章中，我们将介绍如何使用CSS代码去除`select`元素的下拉箭头样式。`select`元素是HTML表单元素之一，用于提供一个下拉列表供用户选择，但是默认的下拉箭头样式可能不符合某些网页设计的要求。去除默认箭头...
css 设置下拉列表 select 样式
03-16
总结起来，设置CSS样式来美化下拉列表`<select>`并非易事，但通过理解浏览器的限制，以及利用JavaScript和自定义组件，我们可以创建出具有独特风格的交互式下拉列表。在实际开发中，要时刻关注用户体验，确保在美观...
JS+CSS美化经典Select选项框插件
07-03
然而，原生的Select在样式控制上相对有限，导致其在现代网页设计中可能显得不够美观或与整体设计风格不协调。为了改善这一情况，开发者们通常会利用JavaScript（JS）和层叠样式表（CSS）来增强Select的视觉效果，...
学习用CSS3技术自定义Select下拉表单.rar
07-10
在网页设计中，CSS3（层叠样式表第三版）技术为我们提供了丰富的样式控制和动态效果，使得网页的用户体验和视觉表现力得到了显著提升。"学习用CSS3技术自定义Select下拉表单"的主题正是关于如何利用CSS3来改造传统的...
CSS Selector
ReZero's Blog
08-25 661
https://flukeout.github.io/
css selector
米菲的泰迪
02-21 398
调试： F12-console-document.querySelector(css表达式) 特殊字符： . class # id &gt; 层级 样例： &lt;span class="xxx"...  &lt;input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplet
Css Selector
天上白玉京 十二楼五城
07-22 209
Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute. Here, the selector represents a span element whose hello attribute ...
[CSS3] Understand CSS Selector Specificity
weixin_33800463的博客
12-11 223
It is hard to explain css selector specificty, to easy way to understand it is by playing around with it.   To remember some rules can be helpful: inline style &gt; ID selector &gt; Classes, attr...
CSS3中select的用法及代码示例
CodeGu的博客
10-02 1070
选择器(selectors)是CSS中非常重要的一部分，它可以用来选择需要样式化的HTML元素。在CSS3中，我们可以使用各种选择器来选择元素，包括基本选择器、层次选择器、属性选择器、伪类选择器等。通过合理使用选择器，您可以更精确地选择元素并对其应用样式，实现丰富多样的页面效果。ID选择器：通过元素的唯一ID选择元素。值属性选择器：选择具有指定属性及属性值的元素。后缀属性选择器：选择具有指定属性值结尾的元素。存在属性选择器：选择具有指定属性的元素。后代选择器：选择指定元素的后代元素。
select css
zlfh的专栏
01-15 2072
simulate combox control - http://www.never-online.net body, input{ font-family: verdana; font-size: 9pt;}h1{ font-family: tahoma; font-size: 22pt; text-align: left;}pre{ font-size: 9pt; font-family:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值