css3改变input，type=checkbox时的背景色

Question

如上图，是一个input标签，type=checkbox时默认的样式
我想改变这个选择框的背景色要如何改呢？

Answer 1

修改了下，测试过了可以

       input{
            position: relative;
            background-color: blue;
            width: 20px;
            height: 20px;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            font-size: inherit;
            color: inherit;
        }
      
        input:checked {
            background-color: red;
            border: 1px solid red;
            text-align: center;
            background-clip: padding-box;
        }

Answer 2

直接改太难改了，茅坑里的石头又臭又硬。
建议通过visibility: hidden让它隐藏但是保持占位，然后用个兄弟元素及其伪元素来展示