边框颜色的CSS复选框样式[重复]

我的表格中有一个复选框。 这是该复选框的 CSS

input[type="checkbox"] {
    width: 20px;
    height: 30px;
    margin: auto;
    display: table-row;
    border: 5px solid red;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 4px;
    margin-top: 1px;
}

但它显示正常的复选框。 我想更改该复选框的边框颜色。 但它不起作用！

您可以只在下面放置复选框边框的 css 并查看小提琴演示 https://jsfiddle.net/f3ukuvga/

CSS:

.error input[type=checkbox] {
  outline: 2px solid #c00;
}