1

Cómo puedo mantener el mismo estilo del input hora tanto en Firefox como en Chrome. Lo quiero como en firefox. Estoy usando angular material

firefox input time: introducir la descripción de la imagen aquí

chrome input time:

introducir la descripción de la imagen aquí

<mat-form-field appearance="outline">
                  <mat-label>Hora hasta</mat-label>
                  <input matInput type="time" name="d4" [(ngModel)]="updateModel.horaHasta[0]" [min]="minHour" max="23:59">
                </mat-form-field>

2 respuestas 2

2

Esto te puede ayudar,

https://www.w3schools.com/cssref/css3_browsersupport.php

Hay cieras propiedades que en otros navegadores se ven distintas, lo que puedes hacer es referenciarlo a cada navegador o bien, usar referencias css mas generales que cualquier navegador las identifique. De aquí, ya todo depende lo que vayas hacer.

/* Estilo para Chrome */
input[type="time"]::-webkit-datetime-edit {
  color: #333; /* Color del texto */
  background-color: #fff; /* Color de fondo */
}

/* Estilo para Firefox */
input[type="time"]::-moz-time-text {
  color: #333; /* Color del texto */
  background-color: #fff; /* Color de fondo */
}

O bien, estilos mas generales.

input[type="time"] {
  color: #333; /* Color del texto */
  background-color: #fff; /* Color de fondo */
}

Espero que esto te ayude!

0

Al final lo he resuelto de esta manera, aplicando las modificaciones para cualquier navegador menos Firefox. La clase 'timeBox' se la he agregado a mi input de tipo 'time'.

@supports not (-moz-appearance:none) {
    input[type="time"]::-webkit-calendar-picker-indicator {
        width: 18px;
        height:18px;
    }

    .timeBox {
        margin-top: 8px;
        height: 9px;
    }

    input[type=time] {
        line-height: 0.8;
    }
}

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.