HTML：仅使用 CSS 修改复选框/单选框样式答案

【问题标题】：HTML: Modify checkbox/radio style with CSS onlyHTML：仅使用 CSS 修改复选框/单选框样式
【发布时间】：2015-07-28 22:58:54
【问题描述】：

我知道这类问题至少被问了 100 次，但我的意思是 CSS only：

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

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

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

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

【问题讨论】：

如果不想添加额外的标记，或者不想使用 JS，那么最好的选择是使用background-images - 它适用于所有浏览器。

标签： html forms css input

【解决方案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;
}

&lt;input type="checkbox" /&gt;

【讨论】：

我认为仅基于 webkit 工作（在 Chrome/Safari 中还可以）。在 Firefox 中不起作用 - 它只会更改输入大小。（我敢打赌它也不会在 IE 中工作）