Solución:
Solo agrega el required atributo:
<input type="date" required>
Lo probé en Chrome y funciona bien para mí.
Su solución sencilla para todos los navegadores actualizados podría ser:
input[type="time"]::-webkit-clear-button {
display: none;
}
Si está dispuesto a especificarlo solo para Internet Explorer 10, debe diseñarlo con
::-ms-clear pseudo-elemento:
input[type="time"]::-ms-clear {
display: none;
}
También puedes hacerlo usando width y height para todos input elementos:
input::-ms-clear {
width: 0;
height: 0;
}
Si desea aplicarlo solo para ingresar con tipo de texto:
input[type=text]::-ms-clear {
display: none;
}
EDITAR 1:
Si no funciona, debe asegurarse de no haber seleccionado navegador / documento modo diferente a IE10 / Estándar en herramientas F12!
EDITAR 2:
Además, puede que encuentres interesantes otros pseudocontroles:
/* Hide the cancel button */
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Hide the magnifying glass */
::-webkit-search-results-button {
-webkit-appearance: none;
}
/* Remove the rounded corners */
input[type=search] {
-webkit-appearance: none;
}
TL; DR no hay una forma basada solo en HTML o CSS para tener una entrada de tiempo y eliminar el botón de borrar que funciona para todos los principales navegadores. Para resolver esto para todos los navegadores, debe usar una biblioteca JavaScript y una validación del servidor (si desea asegurarse de que un usuario está enviando datos válidos). Si no desea utilizar JS, probablemente sea mejor utilizar ambos enfoques a continuación. Consulte esta tabla para ver una comparación de compatibilidad:
+---------+-------------------------+--------------+-------------+
| | <input required> | CSS approach | JS approach |
+---------+-------------------------+--------------+-------------+
| Firefox | Y | N | Y |
| Chrome | Y | Y | Y |
| Safari | N | Y | Y |
+---------+-------------------------+--------------+-------------+
Enfoque CSS
Los pseudo elementos del prefijo (::-webkit-*, ::-ms-*, ::-moz-*) explicados por @Ilia Rostovtsev son específicos del navegador y no son estándar, a pesar de que muchos elementos específicos del navegador finalmente se han adoptado como estándares y aunque algunos de estos pseudo elementos no estándar son adoptados por la mayoría o todos los navegadores principales. En este momento, no tengo conocimiento de ningún equivalente de Firefox para el webkit y ms respuestas.
Estado: funciona en todos los navegadores excepto Firefox
required Acercarse
<input type="time" required>
Se ve bien, funciona bien en Chrome y Firefox, pero no en Safari. De hecho, Safari no tiene time o date escribe.
Estado: no funciona en Safari
Solución JS
Si desea que funcione en todos los navegadores, use una biblioteca JS como js-datepicker. Se ha probado para que funcione en todos los navegadores y restringe la entrada del usuario, sin un botón para borrar.
Nota sobre la validación del servidor
Si le importan en absoluto sus datos de back-end y cómo se almacenan (pista: debería), ¡valídelos también en el back-end! Restringir la entrada del usuario en el front-end no evitará que un usuario determinado o confundido lo estropee. La validación del servidor ayuda a evitar errores extraños o intentos de inyección de XSRF.