ios - 如何在 iOS 10.3.3 的移动版 Safari 中更改此自定义复选标记颜色？

Question

它在 Chrome 中有效，但在 Safari 中始终显示为黑色。我什至将 color: #0A0 放在 4 个不同的地方，并尝试了 !important。

Chrome

苹果手机

  /* Customize the label (the container) */
  .checkbox-label {
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #0A0;
  }

  /* Hide the browser's default checkbox */
  .checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    border: 1px solid goldenrod;
    color: #0A0;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  /* Style the checkmark/indicator */
  .checkmark:after {
    content: '\2714';
    display: none;
  	font-size: 36px;
    margin: -15px 0 0 0;
    color: #0A0;
    // color: red;
  }

  /* Show the checkmark when checked */
  .checkbox-label input:checked ~ .checkmark:after {
    display: block;
    color: #0A0 !important;
  }

<label class="checkbox-label">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>

iOS 10.3.3，Chrome 版本 66.0.3359.181

Answer 1

演示(在 iPhone 上预览):

您需要添加 variation selector-15 (U+FE0E)解决这个问题

将 content: '\2714'; 更改为 content: '\2714\fe0e';

/* Customize the label (the container) */
  .checkbox-label {
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #0A0;
  }

  /* Hide the browser's default checkbox */
  .checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    border: 1px solid goldenrod;
    color: #0A0;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  /* Style the checkmark/indicator */
  .checkmark:after {
    content: '\2714\fe0e';
    display: none;
  	font-size: 36px;
    margin: -15px 0 0 0;
    color: #0A0;
    // color: red;
  }

  /* Show the checkmark when checked */
  .checkbox-label input:checked ~ .checkmark:after {
    display: block;
    color: #0A0 !important;
  }

<label class="checkbox-label">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>