checkbox - 您如何抑制复选框和单选按钮的标准 HTML 5 外观以支持 Ext JS 7 经典中的自定义外观？

Question

在 Ext JS 7 中，您将如何抑制复选框和单选按钮的标准 HTML 5 外观以支持自定义外观？

我们刚刚将 Ext JS 库升级到版本 7.1.0，我们喜欢复选框和单选按钮的标准 HTML 5 外观。问题是，蓝色与我们用于按钮的颜色不匹配，并且标准控件没有明显显示它们何时具有焦点。（新的 Ext JS 库试图通过在具有焦点的控件旁边放置一个点来修复后者，但很容易错过。）

对于其中的每一个，我们都尝试使用一个自定义图像来模仿 HTML 5 复选框/单选按钮的外观，但颜色与我们的按钮在焦点和非焦点状态下都匹配。（我们在 CSS 中指定它。）问题是，新库覆盖了标准 HTML 5 复选框或单选按钮，因此我们看不到自定义图像。

有没有办法抑制/隐藏标准的 HTML 5 复选框和单选按钮，让我们的背景/覆盖图像显示？我发现这个问题试图在 CSS 中做到这一点，但它对我不起作用。

我们使用的 CSS 是这样的：

.x-form-radio-default {
  background: url(images/form/radio-custom.png) no-repeat;
}
.x-form-checkbox-default {
  background: url(images/form/checkbox-custom.png) no-repeat;
}

（图像位于 CSS 文件所在目录之外的 images\form 目录中。我们还有其他 CSS 指定图像的哪个部分以各种聚焦/未聚焦和选中/未选中状态显示；这是有效的使用之前版本的库和我们之前使用的图像。）对于复选框，CSS如下（对于单选按钮，只需将'radio'替换为'checkbox'）：

.x-form-cb-checked .x-form-checkbox-default {
    background-position: 0 -15px;
}
.x-form-cb-checked .x-form-checkbox-focus.x-form-checkbox-default {
    background-position: -15px -15px;
}
.x-form-checkbox-focus.x-form-checkbox-default {
    background-position: -15px 0;
}

当复选框未选中且未聚焦时，位置变为 0 0。

更新：找到这篇文章，这不是我所追求的，但我能够通过使用 CSS 将复选框/单选按钮的输入元素的不透明度设置为 0 来隐藏标准的 HTML 5 元素；但由于某种原因，无论焦点/选中状态如何，都只显示未聚焦/未选中的图像。

标签： checkboxradio-buttonextjs7