自定义复选框/收音机设计奇怪

Question

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

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

jsFiddle在这里

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

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

这将实际的命中区域置于设计之外,并使其对于它的目的而言毫无用处.

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

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

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

所以我的问题是,为什么在#$%&它是否将实际元素放在屏幕中间？我在这里错过了什么？我玩过这些职位等等,没有快乐,所以我必须为周末做好准备,但我很乐意拿一份不起眼的馅饼来解决它.

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

Answer 1

我不知道如何在Windows Store 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/

干杯