首页 文章

自定义ion-checkbox默认背景颜色

提问于
浏览
4

离子复选框很棒,但我不知道如何将复选框的背景颜色自定义为默认白色以外的其他颜色?我知道如何自定义选中复选框时显示的复选框颜色,而不是未选中的颜色 .

3 回答

  • 4

    我是这样做的:

    .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before {
      background: red !important; 
      border-color: red !important;
    }
    
  • 2

    您应该为复选框类添加覆盖css样式:

    .ionic .checkbox input:before, 
    .ionic .checkbox-icon:before {
      background: #333;    /* use your color hex instead of #333 */
      border-color: #333;
    }
    

    对于活跃状态:

    .ionic .checkbox input:checked:before, 
    .ionic .checkbox input:checked + .checkbox-icon:before {
      background: #333;
    }
    

    我建议添加一个父主题类,这样你就不会改变其复选框的颜色:

    .ionic .my-checkbox-class .checkbox input:before, 
    .ionic .my-checkbox-class .checkbox-icon:before
    
    .ionic .my-checkbox-class .checkbox input:checked:before, 
    .ionic .my-checkbox-class .checkbox input:checked + .checkbox-icon:before {
    

    并像这样使用它:

    <li class="item item-checkbox my-checkbox-class">
     <label class="checkbox">
       <input type="checkbox">
     </label>
     Flux Capacitor
    </li>
    
  • 1

    使用离子颜色,例如:

    <li class="item item-checkbox my-checkbox-class">
     <label class="checkbox checkbox-balanced">
       <input type="checkbox">
     </label>
     Flux Capacitor
    </li>
    

相关问题