0
731
ViewsChrome 83: cambia los colores del nuevo estilo de formulario
Con la nueva actualización de Chrome, Chrome muestra un estilo de formulario predeterminado mejorado. De acuerdo con la publicación, diría que debería ser posible cambiar este tema de formulario para que coincida con el conjunto de colores de un sitio web.
Íbamos por hermoso, webby y neutral. Esperamos que cada sistema de diseño vea un poco de sí mismo en los nuevos diseños e imagine fácilmente cómo podrían adaptarse a su propia marca.
Pasé las últimas horas buscando y tratando de deshacerme del color azul predeterminado que contrasta muy mal con el resto de mi sitio web. Además de usar '-webkit-appearance: none;' y rediseñar cosas como casillas de verificación yo mismo, no estoy seguro de si es posible.
¿Alguien también experimenta este problema o tiene una solución o documentación que me falta?
10 answers
Answer question0
Utilizar:
input[type="checkbox"] { -webkit-appearance: none; }Luego solo dale el estilo que quieras.
En cuanto al estado marcado, puede usar: before pseudo elemento con un ícono de fuente como Fontawesome o con una imagen como esta:
input[type="checkbox"]:checked:before { content: ''; width: 14px; height: 14px; position: absolute; background: url(check.png) no-repeat center 3px transparent #ff0000; }0
Es tan feo que uno no puede simplemente actualizar el estilo de las casillas de verificación :( Por lo tanto, debe ocultar realmente la casilla de verificación nativa e insertar su elemento personalizado usando :before
Aquí está el fragmento usando Font Awesome (icono gratuito para la marca de verificación \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 uncheckedY aquí está el que tiene Unicode puro (que aún requiere un poco de pulido para evitar saltos)
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 unchecked0
Mi solución para traer de vuelta las casillas de verificación grises/negras, apuntando solo a las versiones de escritorio 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); } } } }0
Mi solución preferida solo usa css. Se dirige tanto a Safari como a Chrome, pero de todos modos ya está en escala de grises, así que está bien.
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);} input[type='radio']:checked {-webkit-filter: grayscale(100%);}
0
Esto es específico de Chrome 83 hacia arriba : otros navegadores hacen otras cosas (principalmente en escala de grises).
Esta construcción parece funcionar por ahora, siempre que haya un color de fondo establecido para "body" :
input[type=checkbox] { mix-blend-mode: luminosity; }Ejemplos :
Aunque no estoy seguro de que esto siga funcionando, podría ser lo suficientemente bueno como una solución temporal para aliviar el "sufrimiento del diseñador". Los esquemas de color interrumpidos son una crisis :-).
<!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>enlaces :
0
Pensé que iba a necesitar usar -webkit-appearance: none; , pero resulta que no es necesario. Además, no es necesario usar JavaScript y/o filter .
Aquí es donde aterricé: https://codepen.io/colorful-tones/pen/NWxZpBb
0
Este cambio en la apariencia del widget de Chrome 81 a Chrome 83 afectó mucho a mi interfaz gráfica de usuario, en p5.js. Encontré una manera de volver al estilo Chrome 81, no sé cuánto tiempo estará disponible. Pon esto en tu barra de direcciones de Chrome...
chrome://flags/#form-controls-refresh
Muestra un montón de opciones internas... configura la interfaz de usuario actualizada de Web Platform Controls, es decir. en el que aterrizas, a Deshabilitado. A continuación, debe reiniciar el navegador. Esto elimina todas las "mejoras", incluido el horrible control deslizante azul brillante mencionado anteriormente.
Gracias a un póster de Reddit por la información, cuya URL perdí. (Mi entorno: Mac, Mojave 10.14.6, Chrome 83.0.4103.106). (Ahora también 83.0.4103.116, a más tardar el 25 de junio de 2020).
Ciao y Buena Fortuna.
0
Solución CSS pura que permite cualquier color mientras intenta mantenerse cerca del nuevo diseño. Simplemente reemplace la variable --primary-color. Funciona en navegadores Chromium (Chrome, nuevo Edge) y 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>0
Usando el filtro hue-rotate(), se puede cambiar el color de fondo de las casillas marcadas. Por ejemplo, este css lo hace verde:
Entrada[tipo=casilla de verificación]:marcado{filtro:hue-rotate(290deg);}
Ahora, al agregar escala de grises, se puede oscurecer el color verde:
Entrada[tipo=casilla de verificación]:marcada{filtro:hue-rotate(290deg) escala de grises(50%);}
El filtro de brillo () también puede ayudar a ajustar el color.
Usando invert(), puede obtener una casilla de verificación negra, luego agregar escala de grises y brillo para obtener un fondo blanco (que parece una casilla de verificación normal, solo que sin borde):
Entrada [tipo = casilla de verificación]: marcado {filtro: invertir () escala de grises (100%) brillo (180%);}
0
En Chrome 91 , tal vez pueda probar la palabra clave CSS accent-color acentuado, que permite a los desarrolladores web especificar el color acentuado para los controles de la interfaz de usuario (p. ej., casilla de verificación, botón de opción) generado por el elemento.
La propiedad CSS de acento de color es actualmente experimental. Habilite chrome://flags/#enable-experimental-web-platform-features para probarlo.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <style> input[type="checkbox"] { accent-color: red; } </style> <body> <input type="checkbox" /> </body> </html>