css - 自定义复选框/ radio 设计怪异

Question

好吧，我希望借用其他人的眼光，当我摆脱 CSS 上的锈迹时，也许有人可以指出我的愚蠢行为。

我创建了一些自定义的 Checkbox 和 Radio 设计，用于我正在开发的 Windows 应用商店应用程序(可能还提到 UI 框架是 Ionic):

jsFiddle here

它在上面提供的 JSFiddle 示例中按预期工作，您可以在其中看到新组件后面的原始组件 radio 和复选框。他们按预期接受点击/触摸，一切都符合标准。

但是，当我将它放入应用程序时，输出会将实际组件放在屏幕中间，如下所示，而新的单选框/复选框会像我期望的那样呈现在侧面。因此，在不透明度为 1 的情况下，它们会像这样呈现，并且只有右侧的原始控件才能获得触摸/单击输入；

这将实际命中区域置于设计之外，使其对它的目的毫无用处。

您可能会注意到我的 CSS 的第一部分的不透明度为 1，但实际上它应该为 0，因此仅显示自定义设计。

.my-checkbox, .my-radio {
    opacity: 1;
    position: absolute;   
}

(请记住，Windows 商店 HTML 应用程序基本上会在 IE9 的变异版本中显示)

所以我的问题是，为什么在 #$%& 中它会将实际元素放在屏幕中间？我在这里错过了什么？我已经玩过位置等，但没有任何乐趣，所以我必须为周末做好准备，但我很乐意吃一份不起眼的馅饼来解决它。

谢谢你把你的眼睛借给我。 :)

Answer 1

我不确定如何在 Windows 应用商店 HTML 中对此进行测试，但这在 IE9 中确实有效。这就是我如何在不丢失功能的情况下向用户隐藏 native 复选框和单选按钮。

input[type=checkbox].my-checkbox,
input[type=radio].my-radio {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none;
}

我已将它添加到您的 JSFiddle 此处 http://jsfiddle.net/936kj6q3/3/

干杯