select 下拉框和下拉列表美化

最新推荐文章于 2023-02-24 09:53:09 发布
最新推荐文章于 2023-02-24 09:53:09 发布
阅读量6.5k 收藏 3
点赞数
分类专栏： html 文章标签： select 下拉列表 下拉框 美化 纯css

以下代码转自　 源码爱好者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>select美化自定义下拉框样式</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
select{outline:none;}
ul{list-style:none;}
a{text-decoration:none;}
select{display: none;}
.select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}
.select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;background: url(/jscss/demoimg/201403/icon.png) no-repeat 156px 0;}
.select_option{border: 1px solid #b0a296;border-top: none;display: none;}
.select_option li{padding-left: 5px;}
.select_option li.selected{background-color: #F3F3F3;color: #999;}
.select_option li.hover{background: #7b6959; color: #fff;}
</style>
<select name="choose" id="choose">
    <option value="选择风格" selected="selected">选择风格</option>
    <option value="复古风">复古风</option>
    <option value="摇滚风">摇滚风</option>
    <option value="怀旧风">怀旧风</option>
</select>
<script type="text/javascript" src="/ajaxjs/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
(function($){
var selects=$('select');//获取select
for(var i=0;i<selects.length;i++){
    createSelect(selects[i],i);
}
function createSelect(select_container,index){
    //创建select容器，class为select_box，插入到select标签前
    var tag_select=$('<div></div>');//div相当于select标签
    tag_select.attr('class','select_box');
    tag_select.insertBefore(select_container);
    //显示框class为select_showbox,插入到创建的tag_select中
    var select_showbox=$('<div></div>');//显示框
    select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
    //创建option容器，class为select_option，插入到创建的tag_select中
    var ul_option=$('<ul></ul>');//创建option列表
    ul_option.attr('class','select_option');
    ul_option.appendTo(tag_select);
    createOptions(index,ul_option);//创建option
    //点击显示框
    tag_select.toggle(function(){
        ul_option.show();
    },function(){
        ul_option.hide();
    });
    var li_option=ul_option.find('li');
    li_option.on('click',function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        var value=$(this).text();
        select_showbox.text(value);
        ul_option.hide();
    });
    li_option.hover(function(){
        $(this).addClass('hover').siblings().removeClass('hover');
    },function(){
        li_option.removeClass('hover');
    });
}
function createOptions(index,ul_list){
    //获取被选中的元素并将其值赋值到显示框中
    var options=selects.eq(index).find('option'),
        selected_option=options.filter(':selected'),
        selected_index=selected_option.index(),
        showbox=ul_list.prev();
        showbox.text(selected_option.text());
    //为每个option建立个li并赋值
    for(var n=0;n<options.length;n++){
        var tag_option=$('<li></li>'),//li相当于option
            txt_option=options.eq(n).text();
        tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
        //为被选中的元素添加class为selected
        if(n==selected_index){
            tag_option.attr('class','selected');
        }
    }
}
})(jQuery)
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以下代码转自 　开源中国社区

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title>
        <style type="text/css">

            /* SELECT W/IMAGE */
            select#selectTravelCity
            {
               width                    : 14em;
               height                   : 3.2em;
               padding                  : 0.2em 0.4em 0.2em 0.4em;
               vertical-align           : middle;
               border                   : 1px solid #e9e9e9;
               -moz-border-radius       : 0.2em;
               -webkit-border-radius    : 0.2em;
               border-radius            : 0.2em;
               box-shadow               : inset 0 0 3px #a0a0a0;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;
               /* sample image from the webinfocentral.com */
               background               : url(http://webinfocentral.com/Images/favicon.ico) 95% / 10% no-repeat #fdfdfd;
               font-family              : Arial,  Calibri, Tahoma, Verdana;
               font-size                : 1.1em;
               color                    : #000099;
               cursor                   : pointer;
            }
            select#selectTravelCity  option
            {
                font-size               : 1em;
                padding                 : 0.2em 0.4em 0.2em 0.4em;
            }
            select#selectTravelCity  option[selected]{ font-weight:bold}
            select#selectTravelCity  option:nth-child(even) { background-color:#f5f5f5; }
            select#selectTravelCity:hover
            {
                color                   : #101010;
                border                  : 1px solid #cdcdcd;
            }    
            select#selectTravelCity:focus {box-shadow: 0 0 2px 1px #404040;}

            /*SELECT W/DOWN-ARROW*/
            select#selectPointOfInterest
            {
               width                    : 185pt;
               height                   : 40pt;
               line-height              : 40pt;
               padding-right            : 20pt;
               text-indent              : 4pt;
               text-align               : left;
               vertical-align           : middle;
               box-shadow               : inset 0 0 3px #606060;
               border                   : 1px solid #acacac;
               -moz-border-radius       : 6px;
               -webkit-border-radius    : 6px;
               border-radius            : 6px;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;
               font-family              : Arial,  Calibri, Tahoma, Verdana;
               font-size                : 18pt;
               font-weight              : 500;
               color                    : #000099;
               cursor                   : pointer;
               outline                  : none;
            }
            select#selectPointOfInterest option
            {
                padding             : 4px 10px 4px 10px;
                font-size           : 11pt;
                font-weight         : normal;
            }
            select#selectPointOfInterest option[selected]{ font-weight:bold}
            select#selectPointOfInterest option:nth-child(even) { background-color:#f5f5f5; }
            select#selectPointOfInterest:hover {font-weight: 700;}
            select#selectPointOfInterest:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;}

            /*LABEL FOR SELECT*/
            label#lblSelect{ position: relative; display: inline-block;}
            /*DOWNWARD ARROW (25bc)*/
            label#lblSelect::after
            {
                content                 : "\25bc";
                position                : absolute;
                top                     : 0;
                right                   : 0;
                bottom                  : 0;
                width                   : 20pt;
                line-height             : 40pt;
                vertical-align          : middle;
                text-align              : center;
                background              : #000099;
                color                   : #fefefe;
               -moz-border-radius       : 0 6px 6px 0;
               -webkit-border-radius    : 0 6px 6px 0;
                border-radius           : 0 6px 6px 0;
                pointer-events          : none;
            }
        </style>
    </head>

    <body>
        <br />
        <select id="selectTravelCity" title="Select Travel Destination">
            <option>New York City</option>
            <option>Washington DC</option>
            <option>Los Angeles</option>
            <option>Chicago</option>
            <option>Houston</option>
            <option>Philadelphia</option>
            <option>Phoenix</option>
            <option>San Antonio</option>
            <option>San Diego</option>
            <option>Dallas</option>
            <option>San Jose</option>
            <option>Austin</option>
        </select>
        <br />
        <br />

        <label id="lblSelect">
            <select id="selectPointOfInterest" title="Select points of interest nearby">
                <option>caffe</option>
                <option>food beverage</option>
                <option>restaurant</option>
                <option>shopping</option>
                <option>taxi limo</option>
                <option>theatre</option>
                <option>museum</option>
                <option>computers</option>
            </select>
        </label>
</body>
</html>
醉梦几时
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select多选下拉框美化
08-19
jq+css实现的select多选下拉框美化
最完美的select下拉框美化
曾今拼命的想，现在却拼命的忘
10-06 1万+
很多人为select的诸多不完善而头痛，如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件。感兴趣的可以从最后的链接地址下载代码研究与交流。   特点1：美化的并且可自定义的外观 下拉框使用JS进行渲染。当页面引入了脚本和CSS后，页面中的下拉框都会变成如下外观： 该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。 下拉框不存在I
HTML下拉框样式美化
老杨头的博客
02-24 5303
在网页中，下拉框的样式最难美化，默认样式巨丑，好在现在已经有各种框架实现了下拉框的样式美化，主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换，再将对应选项及事件进行关联。最近一项目需要修改很久以前的页面，用户需求又需要美化下拉框样式，又不能引入第三方的框架，只好自己动手写了一个JS插件，实现下拉框的样式美化。
如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
weixin_37347069的博客
08-03 2791
1.实现的效果 2.实现说明 3.完整代码 一、实现的效果： 二、实现说明： 1.由于无法修改原生select中的option样式，因此自己通过ul，li实现下拉列表，用input实现回显框； input实现select回显注意2个地方： 1）使用 readonly=“readonly” 让input框无法实现输入 ，不获取焦点； <input type="text" readonly="readonly" class="ec-input__value" placeholder="业务类型" .
jQuery MultiSelect 美化增强的多选下拉框.rar
07-09
jQuery MultiSelect 下拉多选菜单jquery代码，用jQuery重新定义和美化的漂亮Select下拉框，并增强了功能，在Select内还有单癣复选框的功能。还可对数据分组、过滤等。
最完美的select美化下拉框
04-09
这是一款堪称最完美的下拉框组件，特点如：美化的并且可自定义的外观、使用简单、支持分组、下拉列表展开的方向智能化、下拉框可编辑、集成了ajax联动功能、自定义下拉列表的列数、完美的浏览器兼容性等。
jquery+html自定义select下拉框，下拉框美化
01-27
html中默认的select太丑了，使用jquery+html自定义下拉框。样式随心所欲。
用JavaScript来美化HTML的select标签的下拉列表效果
10-23
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
jQuery完美实现Select下拉列表
05-12
摘要:脚本资源,Ajax/JavaScript,表单美化　jQuery完美实现Select下拉列表，使用jQuery去美化一款漂亮的Select框，，将单调的灰色风格下拉框变为清新的淡蓝色风格，而且为它加了一个圆角框，甚至还有些轻微的动画效果...
下拉列表点击php换背景图片,更换select下拉菜单背景样式的实现代码
weixin_36352315的博客
03-19 152
复制代码 代码如下:.uboxstyle{width:174px;height:39px; float:right;}#uboxstyle{width:174px;height:39px; float:right;}#uboxstyle .select_box{width:174px;height:39px; float:left;}#uboxstyle div.tag_select{displa...
Vue.js仿Select下拉框效果
10-15
主要为大家详细介绍了Vue.js仿 Select下拉框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS自定义select下拉选择框的样式(不用其他标签模拟)
02-01
怎么自定义select下拉选择框的样式，使用纯CSS实现，把浏览器默认的样式覆盖掉还是有其他的方法，select靠纯CSS是不能解决这个自定义样式问题，下面为大家讲解下CSS实现的思路
JavaScript 仿DropDownList控件 html下拉列框美化
10-16
由于html的Select元素式样不更改,自已用Javascript写了DropDownList控件,支持分组.调用相当方便,不用更改原来的HTML结构.调用方法:DropDownList.bind(selectId).例如: --------------------------------- <div style="float: left"> DropDownList2: </div> <div style="float: left"> <select id="searchCategory2" name="searchCategory2"> <option selected="selected" value="35">gdfgfdgjjjjjjjjjjjj</option> <option value="0">└All Categories</option> <optgroup label="---------------------------"> </optgroup> <option value="52">Acrylic Beads sfsf sdfsdfsdffffffffffff </option> <option value="28">Fimo Beads</option> </select> <script type="text/javascript"> DropDownList.bind("searchCategory2"); </script> </div>
用select2写一个多选下拉框样式
weixin_41605586的博客
12-21 3831
1.导入select2的css和js &lt;script type="text/javascript" src="${ctx}/static/js/select2.js?v=${VERSION}"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="${ctx}/static/css/select2.css?v=${VERSION}.
select 下拉框多选，用select代替checkbox
热门推荐
php菜鸟技术天地
03-31 8万+
演示：http://www.freejs.net/demo/524/index.html&lt;select class="demo" multiple="multiple"&gt; &lt;optgroup label="Languages"&gt; &lt;option value="cp"&gt;C++&lt;/option&g
select控件单选多选美化下拉
hoyche的博客
08-14 1452
.select-box { position: relative; overflow-y: hidden; padding: 0 10px; border: 1px solid #e4e4e4; line-height: 22px; cursor: default; background-color: #fff; } .select-box...
html 下拉列表美化,JS+CSS实现美化的下拉列表框效果
weixin_42101164的博客
06-03 1434
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下：一款经过JS+CSS美化的下拉列表，效果很不错，但代码有点偏多，学习CSS的朋友可以学习一下方法，然后自己变通一下，把代码简化一下。运行效果如下图所示：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">JS+CSS下拉...
html下拉框美化,js自定义select下拉框美化特效
weixin_31582915的博客
06-03 331
.select_Box{ width:200px; height:36px; border:1px solid #3CF; position:relative; float:left; margin-right:50px;}.select_Box span{ display:inline-block; width:200px; height:36px; line-height:36px; curs...
qt下拉框设置下拉列表
最新发布
10-04
在Qt中，可以使用QComboBox类来创建下拉框，并设置下拉列表。 首先，需要在Qt的代码中包含QComboBox的头文件。 ```cpp #include <QComboBox> ``` 然后，在需要创建下拉框的地方，使用下面的代码创建并设置下拉框。 ```cpp QComboBox *comboBox = new QComboBox(this); // 创建一个QComboBox对象 comboBox->addItem("选项1"); // 添加下拉列表的选项 comboBox->addItem("选项2"); comboBox->addItem("选项3"); comboBox->setCurrentIndex(0); // 设置默认选中的选项，索引从0开始，这里默认选择第一个选项 ``` 上述代码创建了一个名为comboBox的QComboBox对象，并添加了三个选项。使用addItem()方法可以添加更多选项。 可以使用setCurrentIndex()方法来设置默认选中的选项。该方法的参数是一个整数索引，表示选中的选项在下拉列表中的索引位置。 最后，将QComboBox对象显示在UI界面上。 ```cpp comboBox->show(); ``` 以上就是在Qt下设置下拉列表的基本操作。根据实际需要，还可以进一步设置下拉框的样式、添加事件等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值