自定义复选框/无线电设计奇怪

Question

好的，所以我希望通过借用其他一些眼睛，也许有人可以指出我的愚蠢，因为我摆脱了我的css的锈迹。

我创建了一些自定义Checkbox和Radio设计，以便在我正在使用的Windows应用商店中使用（也可能会提到UI框架是Ionic）：

  

jsFiddle here

上面提供的JSFiddle示例中的预期工作，您可以在其中看到原始组件单元格和新单元格后面的复选框。他们按预期接受点击/触摸，一切都是犹太洁食。

但是，当我把它放入应用程序时，输出会将实际组件放在屏幕中间，如下图所示，而新的收音机/复选框会像我期望的那样呈现在侧面。因此，使用不透明度：1对它们进行渲染，只有右侧原始控件才能获得触摸/点击输入;

这将实际的命中区域置于设计之外，并使其无法实现其目的。

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

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

（请记住，Windows应用商店HTML应用基本上会在IE9的变异版本中显示）

所以我的问题是，为什么在＃$％＆amp;它是否将实际元素放在屏幕中间？我在这里错过了什么？我已经玩过这些职位等等，没有快乐，所以我必须为周末做好准备，但我很乐意接受一些不起眼的馅饼来修复它。

感谢您借助我的眼睛。 ：）

Answer 1

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

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/

干杯