增加复选框大小 - Phonegap Android

Question

我正在使用 Phonegap 开发一个测验应用程序，因此使用 HTML、JavaScript 和 CSS - 没有其他框架。我的问题是复选框在 Android 设备上显得非常小。我尝试在我的 CSS 中将 input[type=checkbox] 的宽度和高度设置为 2em，这适用于 Chrome 和模拟器，但不适用于实际设备（使用三星 S4 Mini 和华硕 TF101 测试）。

复选框在无序列表中使用 - 这是 HTML：

<div class="challenge">
  <ul>
    <li><label for="opt0"><input type="checkbox" id="opt0" value="right">Answer A</label></li>
    <li><label for="opt1"><input type="checkbox" id="opt1" value="wrong">Answer B</label></li>
  </ul>
</div>

下面是相关的 CSS：

body {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  font-family: arial;
  background-color:white;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: medium;
  font-size: 1.5em;
}
.savvy_app {
  position: absolute;
  overflow: auto;
  margin: 0;
  padding: 10px 5px 0 5px;
  top: 73px;
  bottom: 2px;
  max-width: 100%;
  min-width: 98%;
}
input[type=checkbox] {
  width: 2em;
  height: 2em;
}
.challenge ul {
  list-style-type: none;
  padding-left: 10px;
}
.challenge ul li, .results ul li {
  font-family: georgia;
  font-weight: normal;      
  position: relative;
  border: none;
  margin-bottom: 5px;
  padding-bottom: 0;
}
.challenge label, .results label {
  display: block;
  padding-left: 50px;
  padding-top: 5px;
}
.challenge input, .results input {
  display: inline;
  margin-left: -50px;
  position: absolute;
}

我错过了什么？

Answer 1

根据我的经验，在所有设备上可靠地设置表单元素是一场噩梦，尤其是复选框和单选按钮。

一种解决方案是将复选框的可见性设置为隐藏或不透明度为 0，然后使用一些 CSS（例如 input[type=checkbox]:checked）来更改复选框旁边的 span 的背景图像。然后，您的背景图像可以包含绘制的 2 状态复选框，但您希望它看起来。

围绕这一点存在许多兼容性和可访问性问题 - 是否值得值得商榷。