Chrome 83: Изменить цвета нового стиля формы - PullRequest
Новая
       2

Chrome 83: Изменить цвета нового стиля формы

19 голосов
/ 28 мая 2020

С обновлением new Chrome Chrome отображает улучшенный стиль формы по умолчанию. Согласно сообщению, я бы сказал, что должна быть возможность изменить эту тему формы в соответствии с набором цветов веб-сайта. Мы надеемся, что каждая дизайн-система увидит частичку себя в новых дизайнах и легко представит, как их можно адаптировать под собственный бренд.

Я провел последние несколько часов в поисках и попытках избавиться от синего цвета по умолчанию, который очень плохо контрастирует с остальной частью моего веб-сайта. Помимо использования '-webkit-appearance: none;' я сам не уверен, что это возможно.

Есть ли у кого-нибудь такая же проблема или есть решение или документация, которых мне не хватает?

Ответы [ 9 ]

8 голосов
/ 04 июня 2020

Мое предпочтительное решение просто использует css. Он нацелен на Safari, а также на Chrome, но в любом случае это уже оттенки серого, так что ничего страшного.

input[type='checkbox']:checked {-webkit-filter: grayscale(100%);} input[type='radio']:checked {-webkit-filter: grayscale(100%);}

5 голосов
/ 07 июня 2020

Это Chrome 83 с указанием вверх c - другие браузеры делают другие вещи (в основном в оттенках серого).

Эта конструкция кажется работайте сейчас - пока есть цвет фона, установленный для "body": 

input[type=checkbox] {
    mix-blend-mode: luminosity;
}

Примеры :

Check boxes

Хотя я не уверен, что это продолжит работать, этого может быть достаточно в качестве временного обходного пути, чтобы облегчить «страдания дизайнера». Нарушение цветовых схем - кризис: -). 

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Test</title>

  <style>
    body {
      background-color: white;
    }  
    input[type=checkbox] {
          mix-blend-mode: luminosity;
    }
  </style>

</head>

<body>
 <label><input type="checkbox" checked>Test</label>
</body>

</html>

Ссылки :

1 голос
/ 26 июля 2020

Используя фильтр hue-rotate (), можно изменить цвет фона отмеченных флажков. Например, это css делает его зеленым:

Input [type = checkbox]: checked {filter: hue-rotate (290deg);}

Теперь, добавив оттенки серого, можно сделать зеленый цвет темнее:

Input [type = checkbox]: checked {filter: hue-rotate (290deg) grayscale (50%);}

Увы, я не мог получить регулярно- поиск чекбоксов с использованием фильтра invert () - фон остается серым, а не белым.

1 голос
/ 14 июля 2020

Pure CSS решение, которое позволяет использовать любой цвет, стараясь максимально приблизиться к новому дизайну. Просто замените переменную --primary-color. Работает в браузерах Chromium (Chrome, новый Edge) и Firefox. 

:root {
  --primary-color: #f44336;
}

input[type="checkbox"] {
  height: 14px;
  width: 14px;
  position: relative;
    -webkit-appearance: none;
}

input[type="checkbox"]:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid #767676;
  background-color: #fff;
}

input[type="checkbox"]:hover::before {
  border: 1px solid #4f4f4f;
}

input[type="checkbox"]:checked:hover::before {
  filter: brightness(90%);
}

input[type="checkbox"]:checked:disabled:hover::before {
  filter: none;
}

input[type="checkbox"]:checked:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}

input[type="checkbox"]:checked:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 2px;
  box-sizing: border-box;
  height: 5px;
  width: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: translateY(-1.5px) rotate(-45deg);
  transform: translateY(-1.5px) rotate(-45deg);
}

input[type="checkbox"]:disabled::before {
  border: 1px solid #c9ced1;
  border-radius: 2px;
  background-color: #f0f4f8;
}

input[type="checkbox"]:checked:disabled::before {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  background-color: #d1d1d1;
}
<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>
1 голос
/ 29 мая 2020

Мое решение - вернуть серые / черные флажки, ориентируясь только на настольные версии Chrome> = 83. 

if (window.chrome) {
    var ua = navigator.appVersion;
    if (ua.indexOf('Mobile') === -1) {
        var flag = ua.indexOf('Chrome/');
        if (flag !== -1) {
            var version = parseInt(ua.substr(flag + 7, 2));
            if (version >= 83) {
                var chromeStyle       = document.createElement('style');
                chromeStyle.type      = 'text/css';
                chromeStyle.innerText = 'input[type="checkbox"] {-webkit-filter: brightness(0.9);} input[type="checkbox"]:checked {-webkit-filter: grayscale(100%) invert(100%) brightness(1.3);}';
                document.head.appendChild(chromeStyle);
            }
        }
    }
}
1 голос
/ 29 мая 2020

Это настолько уродливо, что нельзя просто обновить стиль флажков :( Итак, вам нужно действительно скрыть собственный флажок и вставить свой собственный элемент, используя :before

Вот фрагмент с использованием Font Awesome (бесплатный значок для галочка \f00c) 

input[type="checkbox"] {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  /* Show the border to simulate the square */
  border: 1px solid #ccc;
  /* Hide the native checkbox */
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
}

input[type="checkbox"]:before {
  /* Show some fake element to keep the space for empty "square" */
  content: "\f0c8";
  color: transparent;
}

input[type="checkbox"]:checked:before {
  /* Show actual checkmark */
  content: "\f00c";
  color: black;
}
<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script>
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked

А вот тот, который использует чистый Unicode (который все еще требует некоторой полировки, чтобы избежать скачков) 

input[type="checkbox"] {
  /* Show the border to simulate the square */
  border: 1px solid #ccc;
  /* Hide the native checkbox */
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
}

input[type="checkbox"]:before {
  /* Show some fake element to keep the space for empty "square" */
  content: "w";
  color: transparent;
}

input[type="checkbox"]:checked:before {
  /* Show actual checkmark */
  content: "✓";
  color: black;
}
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
0 голосов
/ 30 июля 2020

Я думал, что мне нужно будет использовать -webkit-appearance: none;, но оказалось, что в этом нет необходимости. Кроме того, использовать JavaScript и / или filter не нужно.

Вот где я приземлился: https://codepen.io/colorful-tones/pen/NWxZpBb

0 голосов
/ 24 июня 2020

Это изменение внешнего вида виджета с Chrome 81 на Chrome 83 очень сильно повлияло на мой Gui в p5. js. Я нашел способ вернуться к стилю Chrome 81, я не знаю, как долго он будет доступен. Поместите это в свою адресную строку Chrome ..

chrome: // flags / # form-controls-refre sh

Появится множество внутренних параметров .. установите обновленный интерфейс управления веб-платформой ie. тот, на который вы приземляетесь, для инвалидов. Затем необходимо перезапустить браузер. Это избавляет от всех «улучшений», включая ужасный ярко-синий слайдер, упомянутый выше.

Спасибо постеру Reddit за информацию, URL-адрес которой я потерял. (Мое окружение: Ma c, Mojave 10.14.6, Chrome 83.0.4103.106). (Также сейчас 83.0.4103.116, не позднее 25 июня 2020 г.).

Ciao e Buona Fortuna.

0 голосов
/ 28 мая 2020

Используйте: 

input[type="checkbox"] {
    -webkit-appearance: none;
}

Затем просто оформьте его так, как вы хотите.

Что касается отмеченного состояния, вы можете использовать: перед псевдоэлементом со значком шрифта, например Fontawesome или с изображением вот так: 

input[type="checkbox"]:checked:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    background: url(check.png) no-repeat center 3px transparent #ff0000;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...