Je n'arrive pas à régler la largeur d'un champ <input> de type time ou number avec des règles CSS dans le <head> de la page.
Avec Chrome l'affichage peut passer même s'il ne fait pas comme je veux mais avec Firefox cela explose tout.
Le plus bizarre est que si j'ouvre l'inspecteur de code et que j'ajoute une nouvelle règle 'input.type { width: 5rem; }', cela marche sans souci
La seule solution que j'ai trouvé est d'utiliser Javascript pour ajouter un style dans la balise. Pas très propre.
Avec Chrome l'affichage peut passer même s'il ne fait pas comme je veux mais avec Firefox cela explose tout.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gradateur</title>
<style>
body, table, form { margin: 0; padding: 0; }
body { background-color: #444; font-size: 16pt; font-family: 'Noto Sans', 'Droid Sans', Sans-Serif; }
form { max-width: 20rem; margin: 50vh auto 0; transform: translateY(-50%); }
table { margin: 0 auto; border-collapse: collapse; background-color: #eee; }
tr:nth-of-type(2n) { background-color: #ccc; }
th { padding: 0.3rem; }
td { padding: 0.3rem; text-align: center; }
tr:not(:last-of-type) td:not(:last-of-type), th:not(:last-of-type) { border-right: 1px solid #444; }
tr:not(last-of-type td:first-of-type { text-align: right; padding-right: 1rem; }
input[type="number"] { width: 4.5rem !important; }
input.puiss { width: 5rem; }
</style>
</head><body>
<form method="post">
<table>
<tr><th>Horaire</th><th>Puissance</th></tr>
<tr><td><input type="time" name="H1" value="07:30" /><td><input type="number" name="P1" value="25" min="0" max="100" class="puiss" /></td></tr>
<tr><td><input type="time" name="H2" value="10:30" /><td><input type="number" name="P2" value="15" min="0" max="100" class="puiss" /></td></tr>
<tr><td><input type="time" name="H3" value="22:30" /><td><input type="number" name="P3" value="50" min="0" max="100" class="puiss" /></td></tr>
<tr><td colspan="2"><input type="submit" /></td></tr>
</table>
</form>
</body></html>Le plus bizarre est que si j'ouvre l'inspecteur de code et que j'ajoute une nouvelle règle 'input.type { width: 5rem; }', cela marche sans souci
La seule solution que j'ai trouvé est d'utiliser Javascript pour ajouter un style dans la balise. Pas très propre.
