Avec la nouvelle mise à jour de Chrome, Chrome affiche un style de formulaire par défaut amélioré. Selon l'article, je dirais qu'il devrait être possible de modifier ce thème de formulaire pour qu'il corresponde à l'ensemble de couleurs d'un site Web.
Nous allions à la beauté, au Web et à la neutralité. Nous espérons que chaque système de design verra un peu d'eux-mêmes dans les nouveaux designs et imaginera facilement comment ils pourraient être adaptés pour leur propre image de marque.
J'ai passé les dernières heures à chercher et à essayer de me débarrasser de la couleur bleue par défaut qui a un très mauvais contraste avec le reste de mon site Web. En plus d'utiliser '-webkit-looks: none;' et relooker des choses comme les cases à cocher moi-même, je ne sais pas si c'est possible.
Quelqu'un rencontre-t-il également ce problème ou a-t-il une solution ou une documentation qui me manque?
9 Réponses :
Utilisation:
input[type="checkbox"]:checked:before {
content: '';
width: 14px;
height: 14px;
position: absolute;
background: url(check.png) no-repeat center 3px transparent #ff0000;
}
Ensuite, coiffez-le comme vous le souhaitez.
En ce qui concerne l'état vérifié, vous pouvez utiliser: avant le pseudo élément avec une icône de police comme Fontawesome ou avec une image comme celle-ci:
input[type="checkbox"] {
-webkit-appearance: none;
}
-webkit-appearance: none; cache juste pour moi. Ce serait bien d'avoir un exemple de "style de style que vous voulez" non aléatoire mais "voici le style proche des versions précédentes" (sans avoir besoin d'avoir des images ou des dépendances folles)
C'est tellement moche qu'on ne peut pas simplement mettre à jour le style des cases à cocher: (Vous devez donc vraiment masquer la case à cocher native et insérer votre élément personnalisé en utilisant :before
Voici l'extrait de code utilisant Font Awesome (icône gratuite pour la coche \f00c )
<input type="checkbox" checked="">I'm checked <br> <input type="checkbox">I'm unchecked
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;
}Et voici celui avec Unicode pur (qui nécessite encore un peu de polissage pour éviter de sauter)
<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script> <input type="checkbox" checked="">I'm checked <br> <input type="checkbox">I'm unchecked
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;
}Ma solution pour ramener les cases à cocher grises / noires, en ciblant uniquement les versions de bureau de 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);
}
}
}
}
Ma solution préférée utilise simplement css. Il cible Safari ainsi que Chrome, mais il est déjà en niveaux de gris de toute façon, donc c'est OK.
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);} input[type='radio']:checked {-webkit-filter: grayscale(100%);}
Ceci est spécifique à Chrome 83 - les autres navigateurs font d'autres choses (en niveaux de gris principalement).
Cette construction semble fonctionner pour le moment - tant qu'il y a une couleur d'arrière-plan définie pour
"body":<!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>Exemples :
Bien que je ne sois pas sûr que cela continuera à fonctionner, cela pourrait être une solution de contournement temporaire suffisante pour alléger la «souffrance du concepteur». Les jeux de couleurs perturbés sont une crise :-).
input[type=checkbox] { mix-blend-mode: luminosity; }Liens :
Ce changement d'apparence des widgets de Chrome 81 à Chrome 83 a vraiment affecté mon interface graphique, dans p5.js. J'ai trouvé un moyen de revenir au style Chrome 81, je ne sais pas combien de temps il restera disponible. Mettez ceci dans votre barre d'adresse Chrome.
chrome: // flags / # form-controls-refresh
Il fait apparaître un tas d'options internes .. définir l'interface utilisateur mise à jour de Web Platform Controls, c'est-à-dire. celui sur lequel vous atterrissez, sur Désactivé. Il faut ensuite redémarrer le navigateur. Cela supprime toutes les "améliorations", y compris le terrible curseur bleu vif mentionné ci-dessus.
Merci à une affiche Reddit pour les informations, dont j'ai perdu l'URL. (Mon environnement: Mac, Mojave 10.14.6, Chrome 83.0.4103.106). (Aussi maintenant 83.0.4103.116, au plus tard le 25 juin 2020).
Ciao e Buona Fortuna.
Solution CSS pure qui autorise n'importe quelle couleur tout en essayant de rester proche du nouveau design. Remplacez simplement la variable --primary-color. Fonctionne dans les navigateurs Chromium (Chrome, nouvel Edge) et Firefox.
<input type="checkbox"></input> <input type="checkbox" checked="checked"></input> <input type="checkbox" disabled="true"></input> <input type="checkbox" disabled="true" checked="checked"></input>
: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;
}En utilisant le filtre hue-rotate (), on peut changer la couleur d'arrière-plan des cases cochées. Par exemple, ce css le rend vert:
Entrée [type = case à cocher]: coché {filter: hue-rotate (290deg);}
Maintenant, en ajoutant des niveaux de gris, on peut rendre la couleur verte plus foncée:
Entrée [type = case à cocher]: coché {filter: hue-rotate (290deg) grayscale (50%);}
Le filtre de luminosité () peut également aider à ajuster la couleur.
En utilisant invert (), vous pouvez obtenir une case à cocher noire, puis ajouter des niveaux de gris et de la luminosité pour obtenir un fond blanc (qui ressemble à une case à cocher normale, uniquement, sans bordure):
Entrée [type = case à cocher]: cochée {filtre: invert () niveaux de gris (100%) luminosité (180%);}
Je pensais que j'allais devoir utiliser -webkit-appearance: none; , mais s'avère que ce n'est pas nécessaire. De plus, l'utilisation de JavaScript et / ou d'un filter n'est pas nécessaire.
Voici où j'ai atterri: https://codepen.io/colorful-tones/pen/NWxZpBb
Wesley, j'ai ajouté une réponse. Pas idéal, un peu un tweak, mais au moins c'est simple.