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

Question

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

Chrome

iPhone

  /* 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: '14';
    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>

iOS10.3.3，Chrome版本 66.0.3359.181

Answer 1

演示（在 iPhone 上预览）：

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

将content: '14';更改为content: '14\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: '14\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>

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

How do I change this custom checkmark color in mobile Safari in iOS 10.3.3?

css

mobile-safari

ios