Vuetify更改v-select的指定滚动条的样式

niwlg2el  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(170)

为什么我不能改变这个v-select的滚动?
我想自定义我的v选择滚动条。
在下面的示例中,我做正常的方式,但没有用.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['Foo1', 'Bar1', 'Fizz1', 'Buzz1', 'Foo2', 'Bar2', 'Fizz2', 'Buzz2', 'Foo3', 'Bar3', 'Fizz3', 'Buzz3'],
  }),
})
/* SCROLL STYLE FOR V-SELECT */
#selectScroll::-webkit-scrollbar{
    width: 10px;
}
#selectScroll::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px grey;
}
#selectScroll::-webkit-scrollbar-thumb{
background-color: #b85125;
}
#selectScroll::-webkit-scrollbar-thumb:hover{
background-color: #962d00;
}


/* SCROLL STYLE FOR V-CARD */
#cardScroll::-webkit-scrollbar{
    width: 10px;
}
#cardScroll::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px grey;
}
#cardScroll::-webkit-scrollbar-thumb{
background-color: #1976d2;
}
#cardScroll::-webkit-scrollbar-thumb:hover{
background-color: #1976d2;
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
</head>
<body>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
          <v-select
             id="selectScroll"
            :items="items"
            label="Change Scrollbar"
          ></v-select>

          <v-select
            :items="items"
            label="No Scrollbar Change"
          ></v-select>
    
      <v-card id="cardScroll" style="height:200px;overflow-y:auto">
        <v-card-text v-for="test in 20" :key="test">
         {{ test }}
        </v-card-text>
      </v-card>
    </v-container>
  </v-app>
</div>

</body>
</html>

如何更改v-select的滚动条,只有id selectScroll

7kqas0il

7kqas0il1#

从v-select文档(menu-props):
将props传递到v-menu组件。接受布尔props menu-props=“auto,overflowY”的字符串或对象:menu-props="{ auto:true,overflowY:true }”
从v-menu文档(内容类)

<template>
    <v-select
        :menu-props="{ contentClass: 'selectScroll'}"
        :items="items"
        label="Change Scrollbar"
    />
</template>

个字符

相关问题