自定义复选框/收音机设计怪异答案

【问题标题】：Custom Checkbox / Radio design oddity自定义复选框/收音机设计怪异
【发布时间】：2015-10-06 10:10:54
【问题描述】：

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

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

jsFiddle here

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

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

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

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

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

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

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

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

【问题讨论】：

在单选按钮上设置display:none !important怎么样？
@CreMedian 在 Windows 商店应用程序设备上我失去了触摸输入，并且似乎无法使用您的建议与收音机/复选框进行交互，正如人们所期望的那样。像我提供的图像示例所示的原始 Radio/Checkboxes 的显示是有意显示它们是如何渲染的，在 Android 模拟器等中，它仍然像一样渲染到侧面，但是新的复选框/radios 响应触摸/单击，但在 Windows 商店应用程序上它们没有，您必须单击原始 Radios/Checkboxes 以显示状态更改。
有趣。我的另一个想法是在包含您的无线电组的 <div> 上设置一些属性，例如固定宽度，以查看这是否会影响原始输入元素的位置。否则，如果你只是想显示状态变化，也许 Javascript 是要走的路。
@CreMedian 好吧，这不仅仅是为了状态变化，我需要它们像普通 CheckBox/RadioButtons 一样可靠地运行并获得它们的选中状态等，但我需要它们更大等以适应设计方案和在触摸平板电脑上作为 Windows 商店应用程序可靠地运行。

标签： css html checkbox windows-store-apps radio-button

【解决方案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/

干杯

【讨论】：

此外，为了对此进行扩展，您基本上是在不使用display: none 的情况下使input type=checkbox 或input type=radio 尽可能小。此外，您正在使用label 元素和for 属性使label 元素中的任何内容充当input 元素的单击区域。如果label 元素没有for 属性，或者您用于呈现它的浏览器不支持label for=inputId 功能，则此方法将不起作用。
是的，这很奇怪。因此，通过您的添加，我仍然得到相同的结果，因为它无法识别单击/触摸的用户操作。支持 for= 属性，考虑到它在任何地方都能按预期工作，除了 Windows 商店应用程序 webview，这真的很奇怪。所以还是没有爱。