antd-vue : 修改a-select下拉框的滚动条样式
作者:互联网
通过给 a-select 标签设置 dropdown-class-name 属性,添加一个 class 类,然后修改这个类的样式
<a-select v-model="countName" default-value="xx市" style="width: 80px" dropdown-class-name="eia-dropdown-class" > <a-select-option v-for="item in countNameArr" :key="item.key" :value="item">{{ item }}</a-select-option> </a-select> <style lang="scss"> // 这里一定不能加scoped!! 否则不生效 .eia-dropdown-class { .ant-select-dropdown-menu-item { font-size: 13px; padding: 2px 6px; } .ant-select-dropdown-menu{ &::-webkit-scrollbar { width: 8px; height: 2px; background: #dee4e9; border-radius: 6px; /*外层轨道*/ } &::-webkit-scrollbar-thumb { display: block; width: 8px; margin: 0 auto; border-radius: 6px; background: rgba(54, 138, 241, 0.5); /*内层轨道*/ } } } </style>
标签:vue,dropdown,6px,class,滚动条,radius,border,下拉框,select 来源: https://www.cnblogs.com/buluzombie/p/16463246.html