v-checkbox图标CSS样式不生效及自定义样式优化求助

Hey there! Let's work through your v-checkbox styling issues one by one. I'll break down why your initial attempts didn't work and give you actionable fixes for both your original and updated problems.

Why Your First CSS Attempt Failed #

When you applied styles directly to the .icons class, you were targeting the outer v-checkbox container, not the actual icon elements or the toggle square. Here's the breakdown:

• color not affecting icons: Vuetify wraps icons in a <span class="v-icon"> element inside the checkbox. Your .icons color rule only applies to the container's text, not the nested icon.
• font-weight no change: Same selector issue—you need to target the .v-icon element directly. Also, note that some Material Icons fonts don't support varying font weights, so this might not work for all icons, but we'll cover the correct selector anyway.
• Oversized background: The background was applied to the entire checkbox container (which has default padding/sizing), not the small toggle square. You need to target the specific input container element.

Fixing Your Updated Problem (Conditional Icon Color + Icon Size) #

Your current code is close! The color="white" prop only affects the on-state icon because that's how Vuetify's color prop works for v-checkbox. To make both icons follow your conditional classes and resize them, use these steps:

1. Update Your CSS with Precise Selectors

Add this to your stylesheet to control icon color, size, and the toggle square appearance:

/* Control the toggle square's size and background */
.answer-toggle .v-input--selection-controls__input {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

/* Resize both on/off icons */
.answer-toggle .v-icon {
  font-size: 28px; /* Adjust this value to make icons bigger/smaller */
}

/* Conditional color for success (checked) state */
.answer-toggle.success .v-icon {
  color: white !important;
}

/* Conditional color for red (unchecked) state */
.answer-toggle.red .v-icon {
  color: white !important;
}

2. Simplify Your v-checkbox Template

You can remove the inline style since we moved those styles to CSS, and keep your conditional class binding:

<v-checkbox 
  v-model="answer.correct" 
  on-icon="mdi-check" 
  off-icon="mdi-close" 
  :class="{ 'success': answer.correct, 'red': !answer.correct}" 
  class="answer-toggle mr-3 pl-2 pt-2" 
></v-checkbox>

Key Notes #

• Avoid overusing !important: If possible, make your selectors more specific instead of relying on !important. For example, instead of .v-icon, use .answer-toggle .v-icon which has higher specificity.
• Toggle square background: If you want the square's background to match your conditional classes, add these rules to the CSS:

  .answer-toggle.success .v-input--selection-controls__input {
    background-color: #4caf50; /* Your success color */
  }
  .answer-toggle.red .v-input--selection-controls__input {
    background-color: #f44336; /* Your red color */
  }
  

内容的提问来源于stack exchange，提问作者JohnW2Smith