0
214
VistasWhy is my css not working on v-checkbox's icon?
I have two icons and I'm trying to customize them
<v-checbkox icon class="icons" off-icon="mdi-close" on-icon="mdi-mark"></v-checkbox>
I want something like this :
And actually I have this :
I tried this (got it from css dev mode of the first icon) :
.icons {
background-color: red;
color:green !important;
font-weight: 200;
border-radius: 2px;
}
And the font-weight doesn't change, the color don't change the icon but the hover color and the background color is a (way) too big square.
What I am doing wrong?
Update
Background-color gaves me this :
Ok this almost worked :
<v-checkbox
v-model="answer.correct"
on-icon="mdi-check"
off-icon="mdi-close"
color="white"
style="border-radius:6px; width:40px; height:40px"
:class="{ 'success': answer.correct, 'red': !answer.correct}"
class="answer-toggle icons mr-3 pl-2 pt-2"
></v-checkbox>
But the white only works for mdi-check not mdi-close
How can I give it the same condition as the class and make the icon larger.
3 Respuestas
Responde la pregunta0
It seems to change color & background-color, you should use the corresponding v-checkbox props.
0
As per the Vuetify docs you can change the checkbox's appearance by settings its props like the following (I've used the colour picker to match your example)
<v-checkbox
v-model="your-model"
label="success"
color="#377d22"
value="success"
hide-details
></v-checkbox>
0
You probably already solved this, but gonna answer here in case this can help anyone. Instead of using the 'mdi-check' and 'mdi-close' you should be using:
<v-checkbox
v-model="answer.correct"
on-icon="mdi-checkbox-marked"
off-icon="mdi-close-box"
:color="answer.correct ? 'green' : 'red'"
></v-checkbox>
These icons already have the box, so you don't have to create a box around your icons. And set the color according to you logic. For more icons: https://materialdesignicons.com/