Css 定制复选框/收音机设计古怪

好吧，我希望借一些别人的眼睛，也许有人能指出我的愚蠢，因为我摆脱了css上的锈迹

我创建了一些自定义复选框和收音机设计，以便在我正在开发的Windows应用商店应用程序中使用（可能还提到UI框架是离子型的）：

在上面提供的JSFiddle示例中，可以看到原始组件radio和新组件后面的复选框。他们按预期接受点击/触摸，一切都是洁净的

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

这使得实际的命中区域超出了设计范围，并使其无法发挥作用

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

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

（请记住，Windows应用商店HTML应用程序基本上以IE9的变异版本显示）

所以，我的问题是，为什么在$$%？它把实际元素放在屏幕中间吗？我错过了什么？我已经打了很多位置，没有任何乐趣，所以我必须为周末做好准备，但我很乐意接受一份谦虚的馅饼来解决它

---

谢谢你借给我你的眼睛

我不确定如何在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;
}

我已将其添加到您的JSFIDLE中

---

干杯

设置<代码>显示：无如何！重要信息在单选按钮上？@cremian在windows应用商店应用程序设备上，我失去了触摸输入，似乎无法与收音机/复选框进行交互，正如使用您的建议时所期望的那样。原始收音机/复选框的显示（如我提供的图像示例所示）旨在显示它们的渲染方式，在Android模拟器等中，它仍然会以相同的方式渲染侧面，但新的复选框/收音机会响应触摸/点击，但在windows应用商店应用程序上，它们没有，您必须单击原始收音机/复选框以显示状态更改。有趣。我的另一个想法是，在包含您的无线组的

上设置一些属性，例如固定宽度，以查看这是否会影响原始输入元素的位置。否则，如果您只是试图显示状态更改，可能Javascript就是一种方法。@这不仅仅是为了状态更改，我需要它们像正常的复选框/单选按钮一样可靠地工作，并获取它们的选中状态等，但我需要更大的etc来适应设计方案，并在触摸屏上作为windows应用商店应用程序可靠地运行。此外，为了扩展这一点，您基本上是将

input type=checkbox

或

input type=radio

尽可能小，而不使用

display:none

。此外，您正在使用

label

元素以及

for

属性，使

label

元素中的任何内容都充当

input

元素的单击区域。如果

label

元素没有

for

属性，或者用于呈现此属性的浏览器不支持

label for=inputId

功能，则此操作不起作用。是的，这很奇怪。因此，通过您的添加，我仍然得到了相同的结果，即它无法识别用户的点击/触摸行为。for=attrib是受支持的，考虑到它在除windows应用商店应用程序webview之外的任何地方都能按预期工作，这真的很奇怪。所以还没有爱。