HTML：仅使用CSS修改复选框/无线电样式

Question

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

我想使用CSS更改复选框/无线电的样式，而无需更改那些元素的标记（将它们放入容器中/添加标签元素等）。 我问是否可以在不添加任何新HTML的情况下设置<input type"checkbox"/>样式。

这样的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" />