Question

我有一些代码会创建一个＆＃39; round＆＃39;复选框效果。

它可以在我的台式电脑上正常工作，但在移动设备上，除非您触摸＆＃39;在正确的位置（在右下角），然后复选框不会激活。

我只是想知道是否有人知道如何在移动设备中使这些代码更加强大，或者我是否因使用媒体查询为移动用户设置了正常的复选框而停止使用？

我在这里设置了codePen，以便您可以看到效果。

HTML就是这样：

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

CSS就是这样：

.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;
}

这是从here.的网络中获取的代码（代码中标记为ROUNDED TWO的示例）

非常感谢你能解决的任何问题。

Answer 1

这样的事情怎么样？ http://codepen.io/nathanw/pen/PwrNLz

我从复选框中删除了隐藏属性，并将其直接放在＆＃39;下面。花哨的复选框。它似乎在iPad上运行良好。

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

圆形复选框无法在移动设备上正常运行

1 个答案: