select 下拉列表选择框效果及美化（before 和 :after伪元素的妙用）

最新推荐文章于 2024-05-24 13:19:01 发布
最新推荐文章于 2024-05-24 13:19:01 发布
阅读量2.9k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uffgfbft/article/details/83620116
版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                       

参考博客：https://github.com/chokcoco
                http://www.cnblogs.com/libin-1/p/5766729.html
                http://www.cnblogs.com/coco1s/p/5667853.html
                http://sbco.cc/magicCss/html/index.html
                http://www.cnblogs.com/coco1s/p/5333786.html
                http://www.cnblogs.com/coco1s/p/5528393.html
                http://www.cnblogs.com/coco1s/p/5333786.html
                http://www.cnblogs.com/coco1s/p/5365179.html

这里写图片描述

原文地址：http://www.cnblogs.com/LY-leo/p/5765598.html

来一个简单的：https://github.com/cometwo/select_meihua

或者这个：http://www.dowebok.com/demo/196/

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>        <style type="text/css">            ul li {                list-style: none;            }            .test {                position: relative;                float: left;                width: 120px;                height: 40px;                padding-left: 11px;                font-size: 15px;                line-height: 40px;                cursor: pointer;                border: 1px solid #d2d2d2;                border-radius: 3px;                margin-right: 20px;                outline: none;            }            .test:before {                position: absolute;                right: 13px;                top: 18px;                width: 0;                height: 0;                content: "";                border-width: 8px 8px 0 8px;                border-style: solid;                border-color: #d36969 transparent;                -webkit-transition: transform .25s;                -moz-transition: transform .25s;                -ms-transition: transform .25s;                -o-transition: transform .25s;                transition: transform .25s;            }            .test:after {                position: absolute;                right: 15px;                top: 18px;                width: 0;                height: 0;                content: "";                border-width: 6px 6px 0 6px;                border-style: solid;                border-color: #fff transparent;                -webkit-transition: all .25s;                -moz-transition: all .25s;                -ms-transition: all .25s;                -o-transition: all .25s;                transition: all .25s;            }            .test.active:before {                -webkit-transform: rotate(180deg);                -moz-transform: rotate(180deg);                -ms-transform: rotate(180deg);                -o-transform: rotate(180deg);                transform: rotate(180deg);            }            .test.active:after {                top: 20px;                -webkit-transform: rotate(180deg);                -moz-transform: rotate(180deg);                -ms-transform: rotate(180deg);                -o-transform: rotate(180deg);                transform: rotate(180deg);            }            .test .dropdown {                position: absolute;                right: 0;                left: 0;                display: none;                padding: 0;                border-radius: inherit;                border: 1px solid #d2d2d2;                box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);            }            .test.active .dropdown {                display: block;            }            .test .dropdown:before {                position: absolute;                right: 13px;                bottom: 100%;                width: 0;                height: 0;                content: "";                border-width: 0 8px 8px 8px;                border-style: solid;                border-color: #d2d2d2 transparent;            }            .test .dropdown:after {                position: absolute;                right: 15px;                bottom: 100%;                width: 0;                height: 0;                content: "";                border-width: 0 6px 6px 6px;                border-style: solid;                border-color: #fff transparent;            }            .test .dropdown li {                float: left;                width: 129px;                font-size: 14px;                -webkit-transition: all .3s ease-out;                -moz-transition: all .3s ease-out;                -ms-transition: all .3s ease-out;                -o-transition: all .3s ease-out;                transition: all .3s ease-out;                text-align: center;            }            .test .dropdown li:first-of-type {                border-radius: 3px 3px 0 0;            }            .test .dropdown li:last-of-type {                border-radius: 0 0 3px 3px;            }            .test .dropdown li:hover {                color: #fff;                background: #c43c3d;            }        </style>        <script type="text/javascript">            window.onload = function() {                function DropDown(el) {                    this.dd = el;                    this.span = this.dd.children('span');                    this.li = this.dd.find('ul.dropdown li');                    this.val = '';                }                DropDown.prototype.initEvents = function() {                    var obj = this;                    obj.dd.on('click', function(event) {                        $(this).toggleClass('active').siblings().removeClass('active');                        event.stopPropagation();                    });                    obj.li.on('click', function() {                        var opt = $(this);                        obj.val = opt.html();                        if(obj.span.html() == obj.val) return;                        obj.span.html(obj.val);                        $(document).click(function() {                            $('.test').removeClass('active');                        });                    })                }                var test1 = new DropDown($('#type'));                var test2 = new DropDown($('#kind'));                test1.initEvents();                test2.initEvents()            }        </script>    </head>    <body>        <div id="type" class="test">            <span>投资种类</span>            <ul class="dropdown">                <li>期货</li>                <li>股票</li>                <li>期权</li>            </ul>        </div>        <div id="kind" class="test">            <span>投资类型</span>            <ul class="dropdown">                <li>趋势</li>                <li>震荡</li>                <li>套利</li>                <li>选股</li>                <li>择时</li>            </ul>        </div>    </body></html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
这里写图片描述
绿萝哥哥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现select选择框效果及美化
10-21
本文将介绍如何使用JavaScript（JS）和CSS来实现一个自定义的、可美化的下拉选择框效果。 首先，我们来看HTML结构。在这个例子中，使用了`<div>`标签替代`<select>`，并结合`<span>`和`<ul>`、`<li>`标签来构建模拟...
最完美的select美化下拉框
10-15
很多人为select的诸多不完善而头痛，如无法自定义样式、IE6中无法被浮动层遮住等等。这是一款堪称最完美的下拉框组件，特点如：美化的并且可自定义的外观、使用简单、支持分组、下拉列表展开的方向智能化、下拉框可编辑、集成了ajax联动功能、自定义下拉列表的列数、完美的浏览器兼容性等。更多组件下载请访问：http://www.quickui.net/
如何对select选择框以及内容选项进行美化
最新发布
emmmaha的博客
05-24 1047
选择框以及其选项内容，您可以使用自定义样式和一些技巧来增强外观。以下是一个示例，演示如何使用CSS来美化。您可以根据需要调整样式的属性值，以使选择框和选项内容更符合您的设计需求。这样就可以通过CSS美化。在上面的示例中，我们使用了一些CSS样式来美化。选择框和选项内容，使其看起来更加漂亮。
before css 旋转_深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）...
weixin_39930557的博客
12-20 164
原文链接：http://www.cnblogs.com/LY-leo/p/5765598.html对于:before 和 :after 选择器，大家并不陌生，但是很少有人会主动去用它们。先解释下它们的定义和用法：:before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。有时候，项目中或多或少需要一些箭头...
纯css3 select,CSS3 纯CSS跨浏览器SELECT选择框自定义设计
weixin_34082139的博客
08-03 359
CSS语言：CSSSCSS确定.select {position: relative;height: 47.5px;background: white;box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);}.select:after {content: '';position: absolute;top: 0;width: 0;height: 0;right: 10px...
17素材网免费下载方法，不用会员，免费超简单方法！
热门推荐
wzpnb的博客
07-24 4万+
发现一个超级简单下载17素材网的下载的方法，在这里分享一下。 1.首先你要知道你下载的URL地址 2.复制要下载素材的URL地址到 下面的解析框内 3.点击解析按钮，就可以下载了。 4.分享一下该解析平台的VIP账号。http://vip.sucai8.cn 不在提供账号。 由于老是有人改密码，不再提供账号。 建议收藏，不定期更新！随便转发。请保留...
css实现个性化select 下拉选择框(3种风格)
05-03
在本主题中，我们将探讨如何使用CSS实现三种不同的下拉选择框（select）风格：苹果风格、描边风格和凹凸风格。 1. 苹果风格的下拉选择框： 苹果风格的下拉选择框通常以其简洁、优雅的设计而著称。要实现这一风格，...
3种JS+CSS下拉菜单select美化代码
01-23
- 原生的下拉箭头通常无法改变样式，我们可以用伪元素（如`:before`或`:after`）创建一个自定义的箭头图标，通过调整`content`, `background-image`和`transform`属性实现。 ``` select { position: relative; ...
CSS自定义select下拉选择框的样式(不用其他标签模拟)
02-01
3. **模拟下拉箭头**：使用`::before`或`::after`伪元素创建一个箭头图标。可以利用`content`属性插入字符（如`"\25BC"`或`\25BC`表示向下箭头）并调整位置和样式。 ```css .custom-select::after { content: "\25...
固定宽度下拉列表select中option内容显示不全问题解决方法
03-17
例如，可以创建一个`<div>`，使其看起来像下拉列表，然后使用`:before`或`:after`伪元素来显示`<option>`的内容。 对于不希望引入额外库或使用JavaScript的场景，可以尝试调整`<select>`元素的`width`属性。但是，...
ant中select-dropdown遮盖选择框及定位问题
lowers_1的博客
08-15 3438
ant中select-dropdown遮盖选择框及定位问题
Antd select dropdown 样式修改
jackliujay的博客
09-26 3772
antd select dropdownclassname
Getting value of select (dropdown) before change
SalmonellaVaccine的专栏
02-07 620
http://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change Combine the focus event with the change event to achieve what you want: (function () { var previous;
使用::after代替select标签的默认下拉箭头
Y_shihao的博客
07-21 1786
使用::after代替select标签的默认下拉箭头 去掉selcet标签的默认箭头样式 select { width: 200px; padding: 10px; /* 清楚select原始样式 */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; }
TreeView控件AfterSelect、NodeMouseClick事件的问题
TJT999
07-09 1万+
AfterSelect事件中写代码，第二次点同一个节点，事件不会触发。除非换单击别的节点才能继续触发afterselect事件。NodeMouseClick 事件，是节点单击事件，e.node 是当前选择的节点因此，可以用下面的代码private void dzbTreeView
C#TreeView中AfterSelect和BeforeSelect事件自动保存上一次的数据源
ylq1045的专栏
03-04 1471
当切换TreeView的某一个节点时，自动保存上一次节点的数据源 /// <summary> /// 内部成员变量标记，确保BeforeSelect事件不会多次触发 /// </summary> bool inside = false; private void tvMesInterface_BeforeSelect(object sender, TreeViewCancelEventArgs e) {...
笔记｜使用CSS选择器（使用伪元素选择器）
GUIDM的博客
04-16 1874
1、伪元素选择器 伪元素选择器（pseudo- selector）：提供更复杂的功能，但并非直接对应html文档定义的元素。 伪元素 伪类 ⚠️伪元素实际上并不存在 1.1、使用::first-line 伪元素选择器 匹配文本块的首行。 eg： <style type="text/css">​ ​::first-line {​​ background-color:grey;​​ color:white; ​​} ​​</style>​​ 伪元素选...
伪元素
来呀，快活呀
03-28 692
一个虚拟的元素，用于已有的元素添加特殊效果，可用标签实现该效果 注：CSS3中伪元素由两个冒号开头“：：”，然后接名称。 CSS2
layui select下拉列表框 选中事件
05-26
在 layui 中，可以通过监听 `select` 组件的 `select` 事件来实现下拉列表框选中事件的处理。具体步骤如下： 1. 给 `select` 组件添加一个 `lay-filter` 属性，并赋一个值，用于标识该组件。 ``` <select name="city" lay-filter="citySelect"> <option value=""></option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> ``` 2. 在页面加载完成后，使用 `form.render()` 方法进行渲染。 ``` layui.use(['form'], function() { var form = layui.form; form.render(); }); ``` 3. 监听 `select` 组件的 `select` 事件，并在事件回调函数中处理选中事件。 ``` form.on('select(citySelect)', function(data){ console.log(data.value); //得到被选中的值 console.log(data.elem); //得到select原始DOM对象 console.log(data.othis); //得到美化后的DOM对象 }); ``` 在上面的代码中，`data.value` 表示被选中的值，`data.elem` 表示原始的 `select` DOM 对象，`data.othis` 表示美化后的 DOM 对象。你可以根据实际需求来使用这些属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值