2

introducir la descripción de la imagen aquí

Quiero cambiar el color del icono del calendario

En HTML uso la etiqueta input:date como se muestra abajo:

<input class="form__input" type="date" name="birthDate" id="birthDate" required>

En CSS tengo esto. Consigo cambiar el fondo, pero no el color del icono:

.form__input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: var(--text-white);
    border-radius: 50%;
    padding: 4px;
}

¿Es posible hacer eso?

2
  • ¿Estás usando alguna librería o framework para tus estilos?
    – Jacobo
    Commented el 8 jul. 2022 a las 22:33
  • No. Es solo HTML, CSS y JS Commented el 21 ago. 2023 a las 16:34

1 respuesta 1

1

una solución es invertir los colores. en este caso de negro a blanco. Aquí un ejemplo.

.form__input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    border-radius: 50%;
    padding: 4px;
  }
1
  • Muchas gracias. Eres lo máximo. Me funciono Commented el 11 jul. 2022 a las 17:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.