Как изменить цвет этой пользовательской галочки в мобильном Safari в iOS 10.3.3? - PullRequest
Новая
       18

Как изменить цвет этой пользовательской галочки в мобильном Safari в iOS 10.3.3?

0 голосов
/ 09 июня 2018

Он работает в Chrome, но в Safari он всегда отображается черным.Я даже положил color: #0A0 в 4 разных местах и ​​попробовал !important.

Chrome

Chrome

iPhone

image

  /* 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

1 Ответ

0 голосов
/ 09 июня 2018

Демонстрация (предварительный просмотр на iPhone):

Demo url

Вам необходимо добавить переключатель выбора-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>
...