vuetify select placeholder color - vue.js

I am trying to change placeholder text color of vuetify select box. My attempt is as below.
<v-select
:items="items"
placeholder="place"
dense>
</v-select>
.v-text-field--placeholder {
color: green !important;
}
But it will not change the placeholder text color. Where I was get wrong and how can I fix it?

You need to use the ::placeholder selector:
.v-text-field input::placeholder {
color: green;
}

Related

Using scss to change default Vuetify 3 component settings does not work?

So I've been trying to follow Vuetifys documentation to change up the text-field border.
As far as I understood, the text-field border is determined by $text-field-border-radius. I've created a settings.scss file in my src:
#forward 'vuetify/settings' with (
$text-field-border-radius: 100px,
);
I've then added the file to my vite.config.js:
vuetify({
autoImport: true,
styles: { configFile: 'src/settings.scss' }
}),
Furthermore I've added this to my logincomponent.vue (in the text-field resides):
<template>
<v-text-field
v-model="email"
type="text"
placeholder="Your e-mail "
variant="outlined"
outlined
color="black"
style="color: #FFFFFF"
rounded
class="text-field-border-radius"
required
></v-text-field>
</template>
<style lang="scss">
#use '../settings.scss';
.text-field-border-radius {
$text-field-border-radius: settings.$text-field-border-radius;
}
</style>
Unfortunately nothing I do changes the border radius, and at this point I'm out of ideas. Would really appreciate some help, thanks in advance!
You have to edit/overwrite the css in the settings file itself like this.
#use 'vuetify/settings' with (
// $utilities: false,
$color-pack: false,
$heading-font-family: $head,
$body-font-family: $body
);
Looks like a div with the class v-field__outline is rendered which contains three divs that make up the outline for a v-text-field in Vuetify 3.
v-field__outline__start,
v-field__outline__notch, and
v-field__outline__end
Adding border radius to the start and the end solved this for me.
<style scoped>
:deep() .v-field__outline__start {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
:deep() .v-field__outline__end {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>

Hover an input element, which affects the placeholder

I have tried to change the placeholder color of the input element when you hover it.
add :hover then ::placeholder pseudoelement to change its color:
input:hover::placeholder {
color: red;
}

Having background on button when clicked on but not hovering vuejs

Explanation
I have an icon in a button that when clicked opens a menu.
If I want to get the menu correctly under button I need to change the height, because there doesn't seem to be another option (margin doesn't work). But then I get A background hover effect while not hovering over the button.
So to understand.
Once I click on the button but don't hover over the button I get the effect.
The shape is because I changed the height en width.
Background-color: transparant !important; Doens't work
This is the component file
<template>
<v-menu
:close-on-click="true"
offset-y
transition="slide-y-transition"
v-model="language_menu_open"
return-value="language_menu_open = false">
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
v-ripple="false"
icon
depressed
class="language-button">
<v-icon>{{functionMenu(language_menu_open)}}</v-icon>
<v-icon style="margin-right: 10px !important;">mdi-web</v-icon>
</v-btn>
</template>
<v-list class="language-dropdown">
<v-list-item
v-for="language in languages"
:key="language.title"
v-ripple="false"
#click="language">
<v-list-item-title>{{language.title}}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
export default {
name: "Languages",
data() {
return {
language_menu_open: false,
languages: [
{title: "Nederlands"},
{title: "English"},
{title: "Deutsch"}
],
functionMenu: function chevronChanger(menu_state) {
if (menu_state) {
return "mdi-chevron-up"
} else {
return "mdi-chevron-down"
}
}
}
}
}
</script>
<style scoped>
.language-button {
height: 45px !important;
width: 25px !important;
background-color: transparent !important;
}
.language-button:hover {
background-color: transparent !important;
}
.language-button:hover:before {
background-color: transparent !important;
display: none !important;
}
.language-dropdown {
padding: 0 !important;
}
.language-dropdown:hover:before {
background-color: transparent !important;
display: none;
}
</style>
Any help would be appreciated.
You stated that your primary goal is correct positioning of the menu below the button. Instead of changing the height/width of the button, you should use the nudge-top, nudge-bottom, nudge-right, and/or nudge-left props of the v-menu component. These allow you to precisely tune the positioning of the menu. For example, if you want to move the menu down (further below the button), set the nudge-bottom prop to the number of pixels you want it to move. See documentation here. Using this approach, you don't need to modify the hover effect of your button, which will result in a better user experience.
Also, there is one portion of your template that is inefficient. For one of the icons, you have {{functionMenu(language_menu_open)}}. If possible, you should not use methods in a template except as event handlers, because methods break Vue's reactivity engine. In this case, it would be much better to define a computed property, like this:
computed: {
buttonChevron: function() {
if (this.language_menu_open) {
return "mdi-chevron-up"
} else {
return "mdi-chevron-down"
}
}
}
Then, in your template, instead of {{functionMenu(language_menu_open)}}, use {{ buttonChevron }}. This will have the same effect as your current function, but Vue will handle the changes much more efficiently. (In this particular component, the change will be negligible, but it's a good habit to build.) You can read more about computed properties here.
Try This:
.language-button:active {
background-color: transparent !important;
}

How do you change the text color of a disabled component

I can change the background color using a custom class but not the text color which remains grey.
<v-list-tile slot="activator" class="static" :class="{'disable-events':disabled}" :disabled="item.disabled">
<v-list-tile-title>{{ item.text }}</v-list-tile-title>
<v-list-tile-action class="justify-end">
<v-icon>play_arrow</v-icon>
</v-list-tile-action>
</v-list-tile>
.disable-events {
color: rgba(0,0,0,0)
background-color: rgba(0, 0, 0, 0)
}
I'm trying to make it so that when you click the Source and Results menu-item, the context menu doesn't close, so I disabled the components, and am trying to make the colors the same as their default.
The css attribute you want is ‘color’, not ‘fontColor’
Your mistakes is that fontColor doesn't exist. Use color instead
.disable-events {
color: your color;
}

How to change Vuetify Text fields text input color

How to change Vuetify v-text-fields input text color. I tried many ways but none of them is worked.
enter image description here
I tried to change the "Hello" text to red. It is not working.
if you want to change color to white just add props dark to v-text-input
There are few ways to do this.
One convenient way is to set a class on the v-text-field, then using specificity set the color of the input.
Note that you need to use the !important flag when not editing the Vuetify theme directly.
In the template,
<v-text-field class="text-green"></v-text-field>
In the CSS (e.g. style tag),
.text-green input {
color: green !important;
}
Live Snippet:
new Vue({
el: '#app',
data: () => ({
name: 'John'
})
})
.text-green input{
color: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-text-field class="text-green" v-model="name"></v-text-field>
</v-app>
</div>
What worked for me is exporting the themes colors as css variables (custom properties). Code below
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
},
})
and then in the scss using the following code:
.v-text-field {
input {
color: var(--v-primary-base);
}
}
This works:
<v-text-field class="text-input-blue"/>
In combination with CSS:
.text-input-blue .v-text-field__slot input {
color: #00f !important;
}
One of the downsides of Javascript frameworks is that the CSS is often hard to customize.
In case you are using v-custom the below scss override will work for you:
<div class="input-text-wrapper">
<v-text-field class="input-text"/>
</div>
Style:
<style scoped lang="scss">
.input-text {
::v-deep {
.v-text-field {
input {
color: blue;
}
}
}
}
</style>
You need to create a file related to CSS styles in the Styles section and name it Override. In that file, you can make any desired changes you need. Put the following code in that file, you can change the color of the border:
.v-text-field {
input {
color: rgba(169, 169, 169, 0.33);
}
}