下拉框滚动条样式

最新推荐文章于 2024-05-16 23:39:45 发布
最新推荐文章于 2024-05-16 23:39:45 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g977445x/article/details/121976779
版权 

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        /*滚动条宽度*/
        select::-webkit-scrollbar {
            width: 10px;
        }

        /*滚动条里面小方块*/
        select::-webkit-scrollbar-thumb {
            border-radius: 5px;
            /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
            /* background: rgba(0, 0, 0, 0.2); */
            background-color: orange;
        }

        /*滚动条里面轨道*/
        select::-webkit-scrollbar-track {
            /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
            border-radius: 0;
            /* background: rgba(0, 0, 0, 0.1); */
            background-color: yellow;
        }

        /* 自定义下拉菜单样式 */
        select {
            width: 150px;
            /* 右边距，留给小三角，避免被文字压盖 */
            padding: 0 24px 0 4px;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 12px;
            line-height: 22px;
            /* 清除下拉菜单默认样式 */
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            /* 设置新的小三角背景 */
            /* background: url("../images/arrow_down.png") no-repeat 130px center; */
            background-size: 12px 6px;
        }
    </style>
</head>
 
<body>
	<div class="article-start-box">
		<span class="categery">分类栏目</span>
		<select style="position:absolute;margin-left: 40px;" onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
            <option value="">333333</option>
            <option value="">333333</option>
            <option value="">333333</option>
            <option value="">333333</option>
            <option value="">333333</option>
            <option value="">333333</option>
            <option value="">444444</option>
            <option value="">444444</option>
            <option value="">444444</option>
            <option value="">444444</option>
            <option value="">444444</option>
            <option value="">444444</option>
            <option value="">555555</option>
            <option value="">555555</option>
            <option value="">555555</option>
            <option value="">555555</option>
            <option value="">555555</option>
            <option value="">555555</option>
            <option value="">555555</option>
            <option value="">666666</option>
            <option value="">666666</option>
            <option value="">666666</option>
            <option value="">666666</option>
            <option value="">666666</option>
            <option value="">666666</option>
            <option value="">666666</option>
            <option value="">777777</option>
            <option value="">777777</option>
            <option value="">777777</option>
            <option value="">777777</option>
            <option value="">777777</option>
            <option value="">777777</option>
            <option value="">777777</option>
        </select>
	</div>
</body>
 
 
</html>

奥特曼在敲代码
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何定义Select下拉框的边框颜色和滚动条样式
Here I am
04-02 1万+
下面是从网上搜的，记录一下....方法一：只定义下拉框边框样式。 span style="position:absolute;border:1px solid #000000;width:80;height:20"> select style="position:absolute;clip:rect(2 80 20 2);margin:-2;width:84;background:#e
最完美的select下拉框美化
yjxfox的专栏
11-16 1089
很多人为select的诸多不完善而头痛，如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件：UU人下拉框 特点1：美化的并且可自定义的外观 UU人下拉框使用JS进行渲染。当页面引入了脚本和CSS后，页面中的下拉框都会变成如下外观： 该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。 UU人下拉框不存在IE6中无法被浮动层遮住
Element组件 el-select设置滚动条+滚动加载(两种写法: 原生Js和自定义指令)
最新发布
weixin_46022934的博客
05-16 1111
敬请期待(2024-05-16 23:55)使用自定义指令和usehooks写法的功能出现;希望自己的写法可以帮助到遇到问题的人。有不足之处,或者可以优化的地方,欢迎大家给出自己的建议，会从大家的建议中汲取营养，提升自己!!!
将下拉菜单设为滚动效果
Yan-note
06-08 1269
需要注意的是，滚动条仅在下拉菜单内容超出容器高度时才会显示，如果没有超出高度，滚动条不会显示。此外，在某些浏览器中，滚动条可能不会起作用，这时需要更改滚动条的样式或者使用其他方案来解决问题。以上是将下拉菜单设置成滚动效果的基本步骤。可以根据实际需求调整滚动条的宽度、颜色和边角弧度等样式，实现更加个性化的效果。
为select选择框增加滚动条
u012470138的博客
10-18 1万+
当下拉菜单选项比较多的时候，select下拉列表在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条。效果如下图：
为select下拉框添加滚动条
10-18
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...
好看的滚动条样式
04-07
标题中的“好看的滚动条样式”指的是在网页设计中对浏览器默认滚动条进行美化和定制的一种技术。滚动条作为用户浏览长内容时不可或缺的交互元素，其样式和用户体验往往被开发者忽视，但通过自定义，可以提升网站的...
ToolBar上添加滚动条和下拉框
12-07
本话题主要探讨如何在`ToolBar`上添加滚动条和下拉框，并实现它们之间的交互关联。 首先，我们需要理解`ToolBar`的基本概念。`ToolBar`通常出现在桌面应用或者网页应用中，它可以是水平布局或垂直布局，包含了一...
select下拉滚动条
04-07
注意，滚动条样式的兼容性因浏览器而异，可能需要使用特定前缀（如`-webkit-`）来针对不同内核的浏览器。 3. **jQuery EasyUI整合** jQuery EasyUI是一个基于jQuery的UI库，它提供了一系列预定义的组件，包括下拉...
通过css改变下拉框样式
05-02
/* 隐藏滚动条 */ } select::-ms-expand { display: none; /* 隐藏IE和Edge的下拉箭头 */ } ``` 请注意，对于Firefox，由于其不支持`-webkit-`前缀，我们需要使用一个自定义的图形或伪元素来替换箭头。这通常涉及...
vue - 自定义指令实现select下拉列表滚动加载(1)
Subuprogrammer的博客
08-31 2120
vue自定义指令，下拉列表滚动加载，elementui
滚动条样式修改
Jacson_Wangx的博客
12-25 390
&lt;style type="text/css"&gt; body::-webkit-scrollbar { width:0px; height:2px; background:#0D1C35; border-radius:7px;/*外层轨道*/}  body::-webkit-scrollbar-thumb{ display:block; width:5px; margin:0 auto; ...
Select下拉框的边框颜色和滚动条样式
wangpeipei85的专栏
12-12 1414
                         function showHide(obj){ //隐现层的函数                        sh={block:"none",none:"block"}                        //层的display属性值在"block"和"none"间不断轮换，                        //达到轮换
css如何修改滚动条样式
热门推荐
qq_36926807的博客
07-05 10万+
默认滚动条样式如下：那如何修改呢？如下代码：&lt;div class="inner"&gt;         &lt;div class="innerbox"&gt;         &lt;p style="height:200px;"&gt;这是内容111&lt;/p&gt;         &lt;p style="height:400px;"&am
自定义浏览器滚动条的样式，详细讲解
唐策的博客
11-02 1万+
前段时间，到网上找素材时，看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性。便百之谷之后，发现原来不仅仅只用Chrome，其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果，若有错误或不全，请在评论里
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
是秃子总会发光
03-13 6059
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
HTML 为select自定义出现滚动条的条数
Jay_Wooz的博客
09-29 3万+
在一个网站开发的项目中，提供选项功能的select标签是必不可少的，但我们经常会遇到选项(option)太多以至于其呈现效果不那么友好。于是我们就想到了滚动条，但是怎么样才能自定义条数，当超过条数时出现滚动条这样的效果呢？        网上的答案我不是太看得懂。 我相信也有很多人看不懂，或者说不太有效。那么接下来我说说自己的实现方法。         首先，实现这个效果很重
layui滚动条样式
07-28
以上是关于layui滚动条样式的解决方法。 #### 引用[.reference_title] - *1* [css 修改滚动条样式（随笔记）](https://blog.csdn.net/weixin_38817361/article/details/126408869)[target="_blank" data-report-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值