输入类型复选框无法正确设置样式

妮可

我想设置一个复选框的样式，但我没有标签。但我的样式不适用于该输入我不知道为什么。在我问这个之前，我在堆栈溢出中遇到了一些类似的问题，但什么也没有为我工作。我将添加我的 codepen 示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <input type="checkbox" value="">
   </body>
</html>

我的造型

input[type=checkbox]:before {
  background-color: #00f279;
  border-color: #000000;
  color: #ffffff;
}

input[type=checkbox] {
     transform: scale(1.5);
     -ms-transform: scale(1.5);
     -webkit-transform: scale(1.5);
      padding: 5px;
      vertical-align: middle;
      background-color :#ffffff;
 }

代码笔演示

杰拉姆扎

你必须申请-webkit-appearance: none;。这将删除所有浏览器样式，然后您尝试应用您的样式。

input[type=checkbox]{
 border:1px solid red;
 transform: scale(1.5);
 -ms-transform: scale(1.5);
 -webkit-transform: scale(1.5);
 -webkit-appearance: none;
  padding: 5px;
  vertical-align: middle;
  background-color :#ffffff;

}

现在处于选中状态，您必须应用另一个带有背景图像的 css。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。