Can't remove checkbox original border

Question

I'm trying to create 2 checkboxex and customize them so they look like a square with black border instead the original gray rounded border. I'm using jsreport studio.

HTML code:

    <div class="checkboxTable">
        <div class="row">
            {{#if Racunala}}
                <div class="cell"><input class="checkbox" type="checkbox" checked> računala</input></div>
            {{else}}
                <div class="cell"><input class="checkbox" type="checkbox"> računala</input></div>
            {{/if}}

            {{#if Mobiteli}}
                <div class="cell"><input class="checkbox" type="checkbox" checked> mobiteli</input></div>
            {{else}}
                <div class="cell"><input class="checkbox" type="checkbox"> mobiteli</input></div>
            {{/if}}
        </div>
    </div>

CSS:

input[type='checkbox'] {
    accent-color: white;
    outline: 1px solid black;
    
}

.checkboxTable {
    padding-top: 20px;
    display: table;
    margin: auto;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    padding-left: 50px;
}

I expected for this code

input[type='checkbox'] {
    accent-color: white;
    outline: 1px solid black;
    
}

to change the border but looks like it added a new one around the original one(also when the checbox is 'checked' then the original border disappears like on the screenshot I posted). Can I somehow remove it?

Answer 1

You can try:

input[type=checkbox] {
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    outline: none;
    content: none;  
}