无法移除复选框原始边框

Question

我正在尝试创建 2 个 checkboxex 并自定义它们，使它们看起来像一个带有黑色边框的正方形，而不是原来的灰色圆形边框。 我正在使用 jsreport studio。

HTML代码：

    <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;
}

我期待这段代码

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

更改边框，但看起来它在原始边框周围添加了一个新边框（此外，当“选中”复选框时，原始边框会消失，就像我发布的屏幕截图一样）。 我可以以某种方式删除它吗？

Answer 1

你可以尝试：

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