Question

我想用CSS在HTML中创建一个自定义复选框。当我在IE中运行此代码时，它运行正常，但是当我尝试在谷歌浏览器中运行它时，它显示默认复选框，而不是我的自定义复选框。

在Chrome中运行它需要哪些修改？

HTML

<link href="btn.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="checkbox" class="check" />
</body>

CSS

.check {
    width:81px;
    height:78px;
    border: 3px ridge;
    border-color:red;
    border-style:outset;
    font:Verdana, Geneva, sans-serif;
    font-style:italic;
    font-size:16px;
    font-weight:bold;
    color:red;
}

Answer 1

似乎WebKit（Chrome使用的渲染引擎）中的复选框样式是全有或全无。

您可以使用-khtml-appearance: none关闭所有默认样式（您现在可能需要-webkit-appearance: none或只需appearance: none），但我相信这会让您看不到可见的复选框样式，因此您将不得不使用:checked伪类和背景图像重建整个事物。

请参阅：

Answer 2

那是因为IE支持CSS，它不应该支持。使用CSS无法对复选框进行大量编辑，Firefox和Chrome可以正确编辑...您可以使用背景图像作为复选框布局，或者只使用JS制作自己的图像。

自定义复选框未在Google Chrome中显示

HTML

CSS

2 个答案: