Question

我正在测试我创建的三态单选按钮。

代码太长，无法在此处发布...链接到代码：codepen

input {
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 1;
}

如您所见，我创建了三个单选按钮：每个按钮都是给定大小的正方形，并且是绝对定位的。通过这种方式，用户可以单击/点击控件的任何部分，并且切换应该相应地移动。这适用于桌面设备。在移动设备上，它在Windows手机8设备附带的IE上运行良好，在Chrome for Android上运行良好，但它不适用于Android版Firefox。如果您将输入的不透明度更改为1，您将看到Firefox将浏览器默认大小应用于这些控件，使这些控件无法覆盖它们被分配的部分...

我正在使用Oneplus One上的CyanogenMod 11.0（基于Android 4.4.4）进行测试。

这是一个错误吗？有办法解决吗？

Answer 1

您应该设置<label>的样式而不是输入。标签将选择您需要的radiobox。你的无线电单元将被隐藏。

HTML

<input type="radio" id="yes" />
<label for="yes">Yes</label>

CSS

input {
  visibility: hidden;
}

label {
  display: inline-block;
  height: 30px;
  width: 50px;
}

单选按钮大小 - 适用于Android的Firefox

1 个答案: