javascript - 增加复选框大小 - Phonegap Android

Question

我正在使用 Phonegap、HTML、JavaScript 和 CSS 开发一个测验应用程序——没有其他框架。我的问题是复选框在 Android 设备上显得非常小。我尝试在我的 CSS 中将 input[type=checkbox] 的宽度和高度设置为 2em，这适用于 Chrome 和模拟器，但不适用于实际设备(使用 Samsung S4 Mini 和 Asus 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 状态的复选框，无论您希望它看起来如何。

围绕这个有很多兼容性和可访问性问题——是否值得值得商榷。