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 :
Merci d'avance.
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 */
}
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.
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 ...
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 ?