before
after
code
` .ag-selection-checkbox, .ag-header-select-all{
.ag-checkbox-input-wrapper {
border-radius: 4px;
position: relative;
background: white;
position: relative;
width: 16px;
height: 16px;
box-shadow: none !important;
}
.ag-checkbox-input-wrapper::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 1px solid #bbbbbb;
border-radius: 4px;
pointer-events: none;
box-sizing: border-box;
}
.ag-checkbox-input-wrapper::after{
top: 0;
left: 0;
}
.ag-checkbox-input-wrapper.ag-checked {
background: var(--primary-color) !important;
}
.ag-checkbox-input-wrapper.ag-checked::before,
.ag-checkbox-input-wrapper.ag-indeterminate::before {
display: none !important;
}
.ag-checkbox-input-wrapper::after,
.ag-checkbox-input-wrapper.ag-checked::after,
.ag-checkbox-input-wrapper.ag-indeterminate::after {
content: '✓' !important;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: white !important;
font-size: 12px;
font-weight: bold;
line-height: 1;
}
.ag-checkbox-input-wrapper.ag-indeterminate::after{
content: '−'!important;;
}
.ag-checkbox.ag-indeterminate .ag-input-wrapper,
.ag-checkbox-input-wrapper.ag-indeterminate {
background: var(--primary-color) !important;
}
} `