用CSS控制Select的风格

最新推荐文章于 2025-08-07 16:37:43 发布
转载 最新推荐文章于 2025-08-07 16:37:43 发布 · 541 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/easyjacky/archive/2008/01/26/1054276.html

本文介绍了一种使用CSS和JavaScript自定义HTML Select元素样式的详细方法，包括不同风格的实现，如U-Box、Mac和TM2008样式，通过创建自定义的div和ul元素来替代默认的下拉框，提供了丰富的视觉效果。
今天偶然在网上看到一个用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的样式
weixin_48596030的博客
01-11 4866
用CSS设置select的样式
CSS3中select的用法及代码示例
CodeGu的博客
10-02 1184
选择器(selectors)是CSS中非常重要的一部分，它可以用来选择需要样式化的HTML元素。在CSS3中，我们可以使用各种选择器来选择元素，包括基本选择器、层次选择器、属性选择器、伪类选择器等。通过合理使用选择器，您可以更精确地选择元素并对其应用样式，实现丰富多样的页面效果。ID选择器：通过元素的唯一ID选择元素。值属性选择器：选择具有指定属性及属性值的元素。后缀属性选择器：选择具有指定属性值结尾的元素。存在属性选择器：选择具有指定属性的元素。后代选择器：选择指定元素的后代元素。
css实现个性化select 下拉选择框(3种风格)
05-03
超级极品,自己手册,有3中下拉框选择风格,苹果风格,描边风格,凹凸风格,好东西就是贵点
Python中使用CSS选择器的cssselect库实战指南
最新发布
weixin_35982453的博客
08-07 864
CSSselect是一个Python库，它提供了CSS选择器的接口，使得开发者能够以CSS风格的方式查询XML和HTML文档。这个库广泛用于Web数据抓取、自动化测试、动态内容处理等场景，尤其在处理复杂的DOM结构时，它提供了直观而强大的方式来定位页面元素。在本章中，我们将介绍CSSselect库的基础概念和安装步骤，为后续章节中深入了解和使用CSS选择器打下基础。接下来，我们将从最简单的元素选择器开始，逐步探索更复杂的CSS选择器，并在实际操作中演示如何使用CSSselect进行元素定位。
select风格.rar
07-24
select风格 用jquery实现input框当中的select类型 的样式
CSS实现select样式
季诗筱的博客
04-12 2788
今天做的任务是写一个自适应的表单提交页面，要在移动端和PC端都使用，而且要浏览器兼容。在页面布局的时候遇到的问题是，我用的select下拉框，但是firefox和chrome的下拉框是不一样的，于是就想要自己重写一下。代码如下：select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #b6b6b6; border-r
CSS选择器(select)
Lonelydesertea的博客
12-04 4033
■开发中经常需要找到特定的网页元素进行 ■什么是css选择器 设置样式 □按照一定的规则选出符合的元素,为之添加css样式 ■思考:如何找到特定的那个元素? ■ 选择器的种类繁多,大概可以这么归类 □ 通用选择器(universal selector) □ 元素选择器(type selectors) □ 类选择器(class selectors) □ id选择器(id selectors) □ 属性选择...
CSS怎么去掉select的下拉箭头样式
09-24
在本篇文章中，我们将介绍如何使用CSS代码去除`select`元素的下拉箭头样式。`select`元素是HTML表单元素之一，用于提供一个下拉列表供用户选择，但是默认的下拉箭头样式可能不符合某些网页设计的要求。去除默认箭头...
使用纯Css美化Select下拉选择框的技巧
在使用CSS更改Select下拉框的样式时，需要正确使用CSS选择器来定位到select、option等元素。常用的选择器包括类选择器、ID选择器、属性选择器等。例如，使用类选择器`select.classname`定位到具有特定类的select...
css 设置下拉列表 select 样式
03-16
总结起来，设置CSS样式来美化下拉列表`<select>`并非易事，但通过理解浏览器的限制，以及利用JavaScript和自定义组件，我们可以创建出具有独特风格的交互式下拉列表。在实际开发中，要时刻关注用户体验，确保在美观...
使用DIV和CSS美化Select下拉菜单样式技巧
- `select2css.css`：这应该是一个CSS样式表文件，用于控制美化Select的样式，可能是基于某种样式框架（如select2）的定制版本。 - `ubox-select.gif`：可能是一个不同的美化Select效果的示例，展示了一个叫做...
css select-style属性,beautifulsoupcss Select查找不存在特定属性（style for ex）的标记
weixin_30802819的博客
08-04 408
我第一次来这里。谢谢你帮了我们这么久。直截了当地说：场景：我正在开发一个现有的程序，它将CSS选择器作为一个字符串从配置文件中读取，从而使程序具有动态性，并且能够通过更改CSS选择器的配置值来废弃任何站点。在问题：我正在尝试抓取一个网站，它正在渲染项目作为以下两个选项之一：选项1：.........$299$195soup = soup.select("span.price") - this do...
CSS Selector
ReZero's Blog
08-25 704
https://flukeout.github.io/
css selector
米菲的泰迪
02-21 437
调试： 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 232
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 ...
CSS：选择器
m0_65888394的博客
05-12 641
CSS（层叠样式表）是用于控制网页样式和布局的语言。在CSS中，选择器是用于选择页面上的HTML元素以应用样式的模式。CSS提供了多种类型的选择器，每种选择器都有其特定的用途和行为。
css_selector实例
zjq_blog
01-26 241
1 * { } 0 3 li:first-line { } 2 (one element, one pseudo-element) 5 ul ol+li { } 3 (three elements) 7 ul ol li.red { } 13 (one class, three elements) 9 style=”” 1000 (one inline styling) 11 ...
CSS Selectors 样例
天下任我行
05-09 805
CSS Selector css selector 通常有以下几种方式确定元素： 下文所涉及的HTML代码： <!DOCTYPE html> <html> <head> <titile>Css selector 说明</title> <style> div{width: 100%;line-height:20px; margin-top:10px;background-color:orange;} /* [
CSS自定义select下拉选择框的样式(不用其他标签模拟)
热门推荐
--- 清水思源的专栏 ---
02-03 3万+
select这个东西只靠纯CSS是不能解决这个自定义样式问题的，但还是可以改一点点的。  首先对于默认的样式，刚开始想到使用背景，但经试验对select设置背景是无效的，于是后来就想到了覆盖，用其它元素把那个向下的箭头盖住，然后给这个元素设置背景，写了个demo发现可行，于是就有了下面的这些。  首先用一个a标签套住select：  复制代码 代码如下:  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值