纯CSS修改select的下拉箭头与默认滚动条

最新推荐文章于 2023-10-17 14:32:56 发布
最新推荐文章于 2023-10-17 14:32:56 发布
阅读量941 收藏 4
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS_DGD/article/details/115332553
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改下拉菜单右边默认的小三角及滚动条</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);
        }

        /*滚动条里面轨道*/
        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);
        }

        /* 自定义下拉菜单样式 */
        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>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
</body>

</html>
X可乐
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
select下拉滚动条
04-07
本文将深入探讨select下拉滚动条的实现、样式定制以及与jQuery EasyUI框架的整合。 1. **基本HTML结构** 创建一个基本的`<select>`元素，包括`<option>`标签来定义每个选项： ```html <select> ...
CSS 下拉菜单
山水子农
06-20 1177
1、基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 下拉菜单实例|菜鸟教程(runoob.com) .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position:
a-select设置样式
最新发布
qq_45530512的博客
10-17 1190
【代码】a-select设置样式。
实战撸码，web自动化测试Select下拉框 / 控制滚动条操作（详细）
06-30 601
Select下拉框操作首先，将下面html代码保存到一个文件中。
Bootstrap下拉菜单
weixin_34347651的博客
07-02 438
前面的话 　　网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项，Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单   使用方法 　　在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果...
vue3.0封装dropdown下拉菜单
峰会路转的博客
07-10 3478
vue3.0出来已经有段时间的了，也与必要开始研究它了！ 先看下我们要实现的效果 很常见的展开显示菜单项的内容，在vue3.0里面怎么开发，这里样式我们用的是bootstrap的默认样式 思路一: <DropDown :title="'退出'" :list="menuLists" /> 思路二: <drop-down :title="'退出'"> <drop-dowm-item>新建文章</drop-down-item> <dro
为下拉选择框加滚动条
10-18
5. **响应式设计**: 在移动设备上，由于屏幕尺寸限制，下拉选择框可能默认就有滚动条。在响应式设计中，要确保滚动条在不同设备和屏幕尺寸上都能正常工作，适应各种视口大小。 6. **性能优化**: 当选项数量非常大时...
js+css实现select的美化效果
10-22
3. `.div-select-arrow`: 定义下拉箭头的样式，包括颜色、宽度、高度以及内部的`div`元素，该元素用来放置箭头图标。 4. `.div-select-list`: 这是下拉列表的容器，设置位置、边框、最大高度、背景色、滚动条和初始...
js+css实现select的美化效果.docx
01-19
提到的“滚动条美化版”CSS，是针对`.div-select-list`增加了一些滚动条的样式，使其与整体设计保持一致，通常涉及浏览器特定的伪元素如`::webkit-scrollbar`和`::webkit-scrollbar-thumb`，以改变滚动条的宽度、...
Ant Design 基于dropdownRender属性对下拉菜单的封装
weixin_45945214的博客
09-14 2623
很多时候, antd的select无法满足日常工作中的使用需求, 但是Api文档提供了dropdownRender属性是其有了很强的拓展性, 为此封装了select memu组件来满足选择功能
a-select组件使用dropdownRender 时如果有a-input组件，点击a-input时select组件会收起，导致input无法输入
superYe7的博客
03-10 3769
实现如图效果 期望：点击输入框可以正常输入 下拉框不会收起，选择option时下拉框可以正常收起。 思路：通过open控制select的收放。 <template> <div @mousedown="e => { e.preventDefault() this.selectOpen = true }"> <a-select default-value="lucy" style="width: 300px" :open="se
antd(React) 关于自定义Select选择框的样式
weixin_38949279的博客
08-15 5299
注意】：因为使用的是global样式穿透，为了防止污染其他组件，需要在引用antd组件时再包裹一层
当ant-design-vue中select自定义下拉框覆盖select框
ddong345的博客
03-14 1416
有时候开发时，select下拉框的内容需要自定义内容时，可能会出现，下垃框覆盖到select框，用户想输入内容搜索的时候导致无法输入。3.触发select框展示下拉框时，可以看到里面有个这个属性pupupRef。标签里加上ref属性,形如下面，这里只展示一部分代码。5.后面下拉框的位置就不会出现覆盖select框了。pupupRef属性里面有个align属性。4.所以就将这个属性中修改为false。
antd 下拉框位置出错、下拉框dropdownStyle属性出错(数据超出区域，或者出现双滚动条)
qq_52940988的博客
07-27 8251
antd 下拉框位置出错、下拉框dropdownStyle属性出错(数据超出区域，或者出现双滚动条)
antd选择器下拉菜单样式修改
under taker
11-02 4653
antd选择器下拉菜单样式修改
DropDownList下拉菜单
baiduwenku112的博客
11-06 841
DropDownList其实就是select，只有下拉选择。可以把现有的select或者input渲染成下拉菜单： <inputid="color"value="1"/> <selectid="size"> <option>S-63/4"</option> <option>M-71/4"</option> <option>L-71/8"</optio...
antd a-select下拉框样式修改 vue3 亲测有效
stella_stella123的博客
06-01 2278
antd a-select下拉框样式修改 vue3 亲测有效，使用到Vue3 + Ant Design of Vue 3.2.20
Android零基础入门第46节：下拉框Spinner
weixin_34146410的博客
08-26 3916
2019独角兽企业重金招聘Python工程师标准>>> ...
Antdesign a-select 下拉框超出长度换行显示
朝花夕拾的博客
07-28 2898
a-select下拉框长度超出换行
如何用css样式修改select下拉标签的默认箭头和option高度
06-10
要修改select下拉标签的默认箭头，可以使用以下CSS代码： ```css select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(箭头图片地址) no-repeat right center; background-size: contain; padding-right: 20px; /* 这里的20px是指箭头图片的宽度 */ } ``` 其中，`-webkit-appearance`, `-moz-appearance` 和 `appearance` 属性用于去掉默认的样式，`background` 属性用于设置箭头图片，`background-size` 属性用于调整图片的大小，`padding-right` 属性用于保证选项文本不会被箭头覆盖。 要修改option的高度，可以使用以下CSS代码： ```css select { height: 50px; /* 设置select的高度 */ line-height: 50px; /* 设置选项的行高 */ } ``` 其中，`height` 属性用于设置select的高度，`line-height` 属性用于设置选项的行高，使得选项与select的高度一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值