Question

我正在使用Phonegap开发一个测验应用程序，因此HTML，JavaScript＆amp; CSS - 没有其他框架。我的问题是Android设备上的复选框显得非常小。我尝试设置宽度＆amp;输入的高度[type = checkbox]到我的CSS中的2em，这适用于Chrome和模拟器，但不适用于实际设备（使用Samsung S4 Mini＆amp; 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

根据我的经验，元素是在所有设备上可靠地设置样式的噩梦，特别是复选框和单选按钮。

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

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

增加复选框大小 - Phonegap Android

1 个答案: