2
votes

Firefox type d'entrée time text-align: center

Je veux aligner le texte d'une heure de type d'entrée dans Firefox. Le code suivant fonctionne dans Chrome et Edge mais pas dans Firefox:

<input type="time" value="00:00">

input {
    text-align: center;
}

ici est un codepen

html css input firefox text-align

5 commentaires

Peut-être que Firefox n'est tout simplement pas capable de centrer une entrée de temps?

@UweKeim qui expliquerait la part de marché des navigateurs <5% pour Firefox.

Ici en Allemagne, Firefox a encore un env. 15% de part de marché .

C'est probablement le même cas que les éléments : c'est un widget qui peut avoir n'importe quelle implémentation de conception, donc toutes les propriétés CSS ne s'appliquent pas.

BTW, cela ne répond pas à cette question spécifique, mais j'ai trouvé l'essentiel intéressant: Styling des éléments natifs

3 Réponses :

1
votes

Même pas la solution exacte, vous pouvez essayer d'utiliser un élément

  comme parent de l'élément   et utiliser CSS pour centrer cet élément  élément   comme ci-dessous. Il fonctionnera à la fois sur Firefox et Chrome. .center {
  text-align: center;
}
 <div class="center">
  <input type="time" value="00:00">
</div>

0 commentaires

1
votes

Voici une alternative qui permettrait d'obtenir le même résultat. Placez l'entrée à l'intérieur d'un div et centrez le texte du div. Les résultats suivants donnent un affichage cohérent sur Chrome, Edge et Firefox:

<div class="container">
        <input type="time" value="00:00">
</div>

input {
    border: none;
}

.container {
    border: solid 1px #ccc;
    text-align: center;
    width: 300px;
}

0 commentaires

0
votes

Il fonctionne sur n'importe quel navigateur.

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
        <input type="time" value="00:00">
    </div>
  </div>
</div>

Dans Bootstrap:

<div style = "text-align: center; width: 100px; padding: 50px;">
  <input type="time" value="00:00">
</div>

0 commentaires