0
209
Vistas¿Por qué mi css no funciona en el ícono de v-checkbox?
Tengo dos íconos y estoy tratando de personalizarlos.
<v-checbkox icon class="icons" off-icon="mdi-close" on-icon="mdi-mark"></v-checkbox>Quiero algo como esto :
Y de hecho tengo esto:
Intenté esto (lo obtuve del modo css dev del primer icono):
.icons { background-color: red; color:green !important; font-weight: 200; border-radius: 2px; } Y el font-weight no cambia, el color no cambia el ícono, pero el color de desplazamiento y el background color es un cuadrado (muy) demasiado grande.
¿Que estoy haciendo mal?
Actualizar
Background-color fondo me da esto:
Ok, esto casi funcionó:
<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> 
Pero el blanco solo funciona para mdi-check no mdi-close
¿Cómo puedo darle la misma condición que la clase y agrandar el ícono?
3 Respuestas
Responde la pregunta0
Parece cambiar el color y el color de fondo, debe usar los accesorios correspondientes v-checkbox .
0
Según los documentos de Vuetify , puede cambiar la apariencia de la casilla de verificación configurando sus accesorios de la siguiente manera (he usado el selector de color para que coincida con su ejemplo)
<v-checkbox v-model="your-model" label="success" color="#377d22" value="success" hide-details ></v-checkbox>0
Probablemente ya resolviste esto, pero responderé aquí en caso de que esto pueda ayudar a alguien. En lugar de usar 'mdi-check' y 'mdi-close', debería usar:
<v-checkbox v-model="answer.correct" on-icon="mdi-checkbox-marked" off-icon="mdi-close-box" :color="answer.correct ? 'green' : 'red'" ></v-checkbox>Estos iconos ya tienen el cuadro, por lo que no tiene que crear un cuadro alrededor de sus iconos. Y establece el color de acuerdo a tu lógica. Para más iconos: https://materialdesignicons.com/