Bonjour à tous,

J'ai une application Web qui permet de gerer des heures.
J'utilise donc beaucoup des balises input de type time comme sur la capture décran ci-dessous.

Sur des écrans plus petit, ça affiche un accenseur. Ce qui rend l'expérience pas très facile pour l'utilisateur.

Est-il possible de faire en sorte que les input[type=time] soit plus petit ?

Pour l'application, je me limite au navigateur Google Chrome.

Solutions imaginées :

  • Mettre un font-size pour les input[type=time] plus petit.
  • J'aimerais aussi pouvoir enlever les flèches faut et bas. Est-il possible de faire cela ?
  • Ou alors il existerait le même input mais en version small ?

Merci d'avance.

5 réponses


Si tu veux vraiment styliser tes inputs times, peut-être que tu pourrai mettre un input de type text mais avec un pattern en javascript ?

Sinon t'as testé la propriété appearance ? tu peux peut-être essayer:

input[type=time]{
  appearance:none;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
}
fenchi
Auteur

Merci pour ta réponse.

J'ai essayé le "appearance: none" sur le input[type=time] mais ça ne modifie que le cadre.

"appearance: none" fonctionne bien pour raccourcir un select.

J'ai déjà essayé de faire un input text avec un pattern mais je préfère le input time.

fenchi
Auteur

Re, j'ai un autre problème avec input[type=time], c'est que je ne peut pas mêtre la valeur 24:00.

Il y a moyen de faire en sorte qu'elle accepte 24:00 ?

Ou alors vaudrait mieux refaire un input text avec pattern comme tu m'as dis ? J'ai pas trop envie de refaire la roue non plus ...

fenchi
Auteur

Bonjour, j'ai avancé sur ce problème.

J'ai trouvé une solution pour masquer les flèches qui se trouvent à droite mais il y a encore un petit quelque chose qui m'ennuie.

Voici mon code HTML :

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>IN</th>
            <th>OUT</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="time"/>
            </td>
            <td>
                <input type="time"/>
            </td>
        </tr>
    </tbody>
</table>

Et Voici mon css :

<style>
    table > tbody > tr > td{
        border: 1px solid rgb(150,150,150);
        max-width: 58px;
        overflow: hidden;
    }
    input[type=time]{
        margin: 0;
        border: 0;
    }
</style>

Ce qui me donne un résultat comme ceci :

Donc j'ai encore les heures, les minutes et la croix pour réinitialiser mais plus les flèches.

Ce qui m'ennuie, c'est quand j'encode et puis que je fait la croix, le input se déplace dans le td se déplace.

Y aurait-il moyen de bloquer ce scroll ?

Merci d'avance

Il n'y a pas d'image sur ton dernier post, et que veut-tu dire par "quand j'encode et puis que je fait la croix, le input se déplace dans le td se déplace." précisément ?