I'm currently working on a quiz application using Phonegap, incorporating HTML, JavaScript, and CSS without any additional frameworks. My problem lies in the fact that the checkboxes appear too small on Android devices. I attempted to adjust the width and height of input[type=checkbox] to 2em in my CSS, which seemed effective in Chrome and in the emulator, but not when tested on actual devices such as a Samsung S4 Mini or Asus TF101.
These checkboxes are utilized within an unordered list, with the following HTML structure:
<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>
Below is the relevant CSS code snippet:
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;
}
What could be causing this issue? Any insights would be greatly appreciated.