css - 如何更改 <v-text-field> 图标的颜色?

标签 css vue.js vuetify.js

在我的 <v-toolbar>组件,我想设置一个带有图标搜索前缀的文本字段搜索:

<v-text-field                                                                                                                                  
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field> 

这有效,但它给了我这个我不喜欢的结果:

enter image description here

我不喜欢它,因为我想要白色的文本字段和图标,所以我添加了属性 background-color="white"到前面的代码:

<v-text-field                                                                                                                                                          
    background-color="white"                                                                                                                                             
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field> 

这给了我想要的一半:

enter image description here

如何将那个图标的颜色变成白色?

我在 Vuetify.js API 上做了一些搜索但在那里看不到合适的选项。

最佳答案

遇到了类似的问题。所以我展示了带有 vuetify 的颜色选择器示例

<v-menu
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
>
    <v-text-field
       slot="activator"
       v-model="newClass.color.hex"
       label="color"
       readonly
    >
       <v-icon slot="prepend" :color="newClass.color.hex">
          format_color_fill
       </v-icon>
    </v-text-field>
    <material-picker v-model="newClass.color" />
 </v-menu>

关于css - 如何更改 <v-text-field> 图标的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52270498/

相关文章:

vue.js - 选择后关闭 v-autocomplete

nuxt.js - Nuxt 3 和 Vuetify 3 : breakpoints not working?

javascript - &lt;textarea&gt; 的灵活高度作为新的换行符

html - 增加 Bootstrap 导航栏输入字段宽度

javascript - Vue 未使用 Axios 请求中的数据从数组更新 Vuetify 数据表

css - 如何根据同胞子属性更改样式

vuejs2 - 当 Vuetify snackbar 超时时更新父状态

javascript - 缩小 CSS 和 Javascript 代码

CSS3 变换旋转与使用图像

typescript - 使用 Typescript 类时的 Vue react 性