Checkmark doesn't match checkbox during selection

Datatablesnoob

Hi,

I have an aesthetic problem where the checkbox is larger and offset relative to the black checkerbox underneath. Is there any way to either completely hide the black box and only keep the green checkmark upon selection, or fix the scaling/offset problem? See the attached image for a better explanation.

Using Bootstrap 4.1.1, DataTables 1.10.20, Scroller 2.0.1 and Select 1.3.1.
This is my API object:
`
var table = $(tableElement).DataTable({
data: tableData, //set tableData
columns: aoColumns, //set Column titles
scrollY: defaultFeatures["scrollY"], //enable vertical scrolling
scrollX: defaultFeatures["scrollX"], //enable horizontal scrolling
autoWidth: defaultFeatures["bAutoWidth"],
destroy: true,
scroller: defaultFeatures["scroller"],
scrollCollapse: defaultFeatures["scroller"],
dom: defaultFeatures["sDom"],
paging: defaultFeatures["iDisplayLength"] > -1,
ordering: defaultFeatures["bSort"],
searching: defaultFeatures["bFilter"],
order: defaultFeatures["order"],
pageLength: defaultFeatures["iDisplayLength"],
search: {
smart: false
},
columnDefs: [{
width : "5%",
targets: 0,
className: 'select-checkbox',
checkboxes: {
selectRow: true
}
}],
select: {
style: 'multi',
},
order: [
[1, 'asc']
],
```

Datatablesnoob

After all the hours waiting for the mods to accept this thread, I found it out myself.

Edit the select.bootstrap4.css file's th.select-checkbox:before's "border:" element from ??px to 0px. This hides the box