Question

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

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

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

通过修改我的意思是 - 更改框的样式（主要的css，如border-radius，颜色，边框，阴影）和更改检查样式（颜色，形状等）。

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

Answer 1

它不是跨浏览器解决方案

＆＃13;

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;
}

＆＃13;

<input type="checkbox" />

＆＃13;

HTML：仅使用CSS修改复选框/广播样式

1 个答案: