Thay đổi màu của hộp kiểm trong khung Materialize

Question

Tôi hiện đang làm việc với khung Materialize và tự hỏi là có thể thay đổi màu của hộp kiểm đã điền khi nó có màu xanh lục theo mặc định.

<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" /> 
<label for="filled-in-box">Filled in</label> 

Bất kỳ ý tưởng nào cũng sẽ được đánh giá cao. Cảm ơn

Answer 1

Thêm một lớp học để các đầu vào hộp kiểm mà sẽ tạo kiểu cho sau pseudo-yếu tố của nhãn

.checkbox-orange[type="checkbox"].filled-in:checked + label:after{ 
 
    border: 2px solid #ff9800; 
 
    background-color: #ff9800; 
 
}

<input type="checkbox" class="filled-in checkbox-orange" id="filled-in-box" checked="checked" /> 
 
<label for="filled-in-box"></label>

Answer 2

Điều này phụ thuộc vào loại hộp kiểm bạn sử dụng - điền-in lớp hay không. Bạn sẽ phải đặt trong từ khóa màu CSS như needbe ... chỉ cần thay thế 'indigo' của tôi cho bất kỳ màu nào bạn yêu cầu.

*** Lưu ý - Các lớp Ligthen và Darken sẽ không hoạt động với điều này.

.checkbox-indigo[type="checkbox"] + label:before{ 
    border: 2px solid indigo; 
    background: transparent; 
} 
.checkbox-indigo[type="checkbox"]:checked + label:before{ 
    border: 2px solid transparent; 
    border-bottom: 2px solid indigo; 
    border-right: 2px solid indigo; 
    background: transparent; 
} 
.checkbox-indigo.filled-in[type="checkbox"] + label:after{ 
    border: 2px solid indigo; 
    background: transparent; 
} 
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:after{ 
    background: indigo; 
} 
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:before{ 
    border-top: 2px solid transparent; 
    border-left: 2px solid transparent; 
    border-right: 2px solid #fff; 
    border-bottom: 2px solid #fff; 
} 

http://embed.plnkr.co/zWaJVtsAVXxs0fVLmxRH/