0

I'm developing a quiz app using Phonegap, thus HTML, JavaScript & CSS - no other frameworks. My issue is that the checkboxes appear very small on Android devices. I tried setting the width & height of input[type=checkbox] to 2em in my CSS and this works in Chrome and the emulator, but not on actual devices (tested using a Samsung S4 Mini & Asus TF101).

The checkboxes are used inside an unordered list - here's the 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>

And here's the relevant 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;
}

What am I missing?

2
  • try adding -webkit-appearance: none; for checkbox Oct 5, 2014 at 17:57
  • No, I need the checkboxes displayed to allow users the select possible answers to the quiz. Questions are multiple choice and have more than one answer. Oct 5, 2014 at 18:13

1 Answer 1

0

In my experience form elements are a nightmare to style reliably across all devices, particularly checkboxes and radio buttons.

One solution is to set the checkboxes' visibility to hidden or opacity to 0 and then use some CSS such as input[type=checkbox]:checked to change the background image of a span next to the checkbox. Your background image can then consist of a 2 state checkbox drawn however you want it to look.

There are lots of compatibility and accessibility issues surrounding this - it's debatable whether it's worth while.

2
  • Thanks for the answer, but my major concern with this solution is cross platform compatibility (plan is to eventually port the app to IOS devices) and additional overhead on performance . Oct 6, 2014 at 22:12
  • I'm afraid there isn't a reliable cross platform method of styling checkboxes
    – MrCarrot
    Oct 13, 2014 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.