0
3.7K
ViewsCambiar el color del ícono del calendario de Chrome en la entrada de fecha HTML
Tengo algunas dificultades para diseñar la entrada de fecha HTML 5 en Chrome.
El uso de marcas como <input type="date" max="2020-06-03" value="2020-06-01"> , con algunos estilos de color de fondo y fuente en CSS, se representa en Chrome como:
Me gustaría hacer que el ícono del calendario en el lado derecho sea blanco, para que coincida con el color del texto.
::-webkit-calendar-picker-indicator parecía un posible candidato. Establecer el color de fondo en esto cambia el color detrás del ícono (como se esperaba). Sin embargo, no puedo encontrar ningún parámetro que tenga un efecto en el color del ícono.
6 answers
Answer question0
Me las arreglé para solucionarlo por ahora usando un filtro CSS para invertir el color negro en blanco
::-webkit-calendar-picker-indicator { filter: invert(1); }Sin embargo, esto se siente bastante frágil y lejos de ser ideal.
0
De hecho, puede ser bastante creativo usando la propiedad de filter .
-
invert(100%)vuelve el icono blanco - el
brightness(50%)lo hace gris -
sepia(100%)lo satura y lo hace... sepia -
saturate(10000%)bombea la saturación y la convierte en rojo brillante
Después de eso, puedes jugar con hue-rotate para cambiar el tono. hue-rotate(240deg) lo vuelve azul, hue-rotate(120deg) lo vuelve verde, etc. Si desea obtener un color realmente específico, debe consultar esta pregunta sobre cómo transformar el negro en cualquier color dado usando solo filtros CSS.
0
Otro ejemplo es;
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: 4px; margin-right: 2px; opacity: 0.6; filter: invert(0.8); } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1 }0
El estilo Shadow DOM establece una background-image que no se puede interactuar en CSS (excepto para el filter ). Una opción es reemplazar la imagen completa donde puede establecer cualquier color de relleno y este método será compatible en caso de que Chrome decida heredar el color del icono de color más adelante, a costa de tener un icono "codificado":
::-webkit-calendar-picker-indicator { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>'); }0
Otra forma es configurar el "esquema de color" en oscuro.
input { color-scheme: dark; } <input type="date" />FYI: esto también pondrá la ventana emergente en modo oscuro.
0
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); margin: 0px; margin-right: 20px !important; }