我的复选框输入在 IOS 13.7 上保持小得离谱答案

【问题标题】：My checkbox inputs stays ridiculously small on IOS 13.7我的复选框输入在 IOS 13.7 上保持小得离谱
【发布时间】：2021-08-11 19:13:42
【问题描述】：

我想知道你是否可以帮助我。我有多个复选框输入，并且在许多设备和浏览器中进行了测试。只有在 Apple 13.7 中，我才能看到我的复选框输入是圆形的并且非常小，如图所示：

我的html：

form-group {
    margin-bottom: 15px;
}

.dataallow {
    display: flex;
}

.dataallow input {
    margin-right: 8px;
}

label {
    color: #595959;
}

.dataallow label {
    margin-left: 3px;
    margin-bottom: 0;
}

.size-small {
    font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">               
    <div class="form-group dataallow">
      <input type="checkbox">
      <label class="gray-25 size-small">Text text text text</label>          
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">               
    <div class="form-group dataallow">
      <input type="checkbox">
      <label class="gray-25 size-small">Text text text text</label>          
    </div>
  </div>
</div>

我也在其中使用 bootstrap 3。

【问题讨论】：

我将您的代码复制到了 codepen 并从我的手机 ios 13.7 中进行了检查。与您的图像相比，它们看起来很正常。这里以防有人想尝试：codepen.io/Maxigui/pen/vYKBQzQ
在 iPad IOS 13.6.1 上也很好看
我想我找到了问题的解决方案。当我在标签中放置大量文本时，复选框仍然很小。也许如果我在复选框中输入宽度和高度，它可以解决这个问题。
是的，向标签添加额外的文本会逐渐改变复选框的大小。这个 [link] stackoverflow.com/questions/34220553/… 有帮助吗？

标签： css ios checkbox twitter-bootstrap-3

【解决方案1】：

只需将min-width: 20px 添加到输入元素即可。

当标签的长度比平时长时，它会在 iOS 中发生。

【讨论】：