CODEWITHSUNDEEP
htmlcss
John T
John T

Reputation: 1078

A round checkbox isn't working correctly on mobile device

I have some code which creates a 'round' checkbox effect.

It works fine on my desktop PC but on a mobile device unless you 'touch' in exactly the right place (at the bottom right-hand side) then the checkbox doesn't activate.

I just wondered if anyone knew how to make this code more robust in a mobile device or am I stuck using a media query to put a normal checkbox in for mobile users?

I have set up a codePen here so you can see the effect.

The HTML is this:

<section title="JTroundCheckbox">
  <div class="JTroundCheckbox">
    <input type="checkbox" value="<?php echo $value; ?>" name="checkbox1" id="checkbox1">
    <label for="checkbox1"></label>
  </div>
</section>

The CSS is this:

.JTroundCheckbox {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.JTroundCheckbox label {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 4px;
  cursor: pointer;
  background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
  background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
  background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.JTroundCheckbox label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.JTroundCheckbox label:hover::after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}
.JTroundCheckbox input[type=checkbox] {
  visibility: hidden;
}
.JTroundCheckbox input[type=checkbox]:checked + label:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

This is code that took from the net from here. (example labelled ROUNDED TWO in the code)

Many thanks for any light you can shed on this.

Upvotes: 0

Views: 242

Answers (1)

NateW
NateW

Reputation: 2121

What about something like this? http://codepen.io/nathanw/pen/PwrNLz

I removed the hidden attribute from the checkbox and positioned it directly 'underneath' the fancy checkbox. It seems to work fine on an iPad.

.JTroundCheckbox input[type=checkbox] {
  /* visibility: hidden; */
  position: relative;
  top:4px;
  left:4px;
}

Upvotes: 1

Related Questions