CSS text-indent sur le champ de saisie n'est pas de mise à jour de la position du curseur jusqu'à ce que vous commencez à taper

Lorsque j'utilise le texte-ident de la propriété en CSS, ce que j'attends de voir, c'est quand vous vous concentrez dans la zone de saisie de texte, le curseur de texte icône/curseur apparaît en retrait. Mais il semble comme si il n'est pas en retrait jusqu'à ce que vous tapez pour le premier caractère. Le seul travail est d'utiliser padding à gauche sur l'élément d'entrée, mais je veux éviter à l'aide de rembourrage parce que je suis également à la définition d'une largeur et ne veulent pas avoir à mettre en œuvre un rembourrage correctif pour IE à l'aide d'un IE feuille de calcul.

Ce bug se produit dans Safari.

Voir ci-dessous pour des images de ce que je parle.


Sur l'accent quand il n'y a pas de texte, le texte-ident n'affecte pas la position du curseur:

CSS text-indent sur le champ de saisie n'est pas de mise à jour de la position du curseur jusqu'à ce que vous commencez à taper


Lorsque vous commencez à taper, il tirets correctement:

CSS text-indent sur le champ de saisie n'est pas de mise à jour de la position du curseur jusqu'à ce que vous commencez à taper


Une fois que vous tapez, puis supprimez ce que vous avez tapé, il affiche ce que je veux faire depuis le début (tiret de l'accent circonflexe).

CSS text-indent sur le champ de saisie n'est pas de mise à jour de la position du curseur jusqu'à ce que vous commencez à taper

HTML:

<input type="text" />

CSS:

input   { text-indent: 10px; }
Comment au sujet de l'affichage venir de code ou un jsFiddle?
Ajout d'un code à reproduire le bug.
Fonctionne très bien sur Chrome & FF: jsfiddle.net/j08691/VyNP2
Mais ne fonctionnent pas bien dans Safari.
essayez lineheight:1px

OriginalL'auteur user1418227 | 2012-08-20

  1. 3

    C'est confirmé WebKit bug qui a été récemment résolu https://bugs.webkit.org/show_bug.cgi?id=82688

    Votre version de Safari est peut-être trop vieux pour ce correctif être inclus.

    Utiliser padding-left à la place.

    OriginalL'auteur Andrew Kolesnikov

  2. 1
    <style>
::-webkit-input-placeholder {text-indent:10px!important;}
:-moz-placeholder { text-indent:10px!important;}
::-moz-placeholder {text-indent:10px!important;}
:-ms-input-placeholder {text-indent:10px!important;}
</style>

    Cela permet le retrait du texte à centrer en retrait, ce qui je crois a été corrigé dans les plus récentes versions de webkit /safari. Toutefois, ce correctif doit vous aider avec les anciennes versions.

    Grâce

    OriginalL'auteur Chris