HTML:仅使用 CSS 修改复选框/单选样式

Question

我知道这种问题至少被问过 100 次，但这里是我所说的 仅 CSS 的意思:

我想用 CSS 更改复选框/单选按钮的样式，而不需要更改这些元素的标记(将它们放入容器/添加标签元素等)。我在问是否可以设计 <input type"checkbox"/>不向其中添加任何新的 html。

这样的 CSS 可以添加到任何现有的页面并起作用。我发现的所有解决方案都需要某种给定类型的标记，如果您只是将它们添加到带有表单的某个页面，它就不会起作用，因为它们本身可能没有用于输入的标签或容器。

我的意思是修改 - 更改框的样式(主要 css，如边框半径、颜色、边框、阴影)和更改检查样式(颜色、形状等)。

我知道 JS 可以添加必需的标记 - 但这不是解决方案，它是解决方法，我不是在寻找它。

Answer 1

不是跨浏览器的解决方案

input[type="checkbox"]{
    width: 30px;
   height: 30px;
   margin: 0;
   padding: 0;
  -moz-appearance: none; 
   -webkit-appearance: none;
   -ms-appearance: none; 
   -o-appearance: none;
   appearance: none;
    outline: none;    
}
input[type=checkbox]:after {    
    content: "";
    width: 30px;
    height: 30px;   
    border: 2px solid #ccc;
    margin: 0;
    vertical-align: top;    
    display: inline-block;
    border-radius: 50%;    
}
input[type=checkbox]:checked:after{
    background: #ccc;
}

<input type="checkbox" />