Remplissage CSS HTML5 d'espace réservé

J'ai déjà vu cet article et j'ai tout essayé pour changer le rembourrage de mon espace réservé, mais hélas, il semble qu'il ne veuille tout simplement pas coopérer.

Quoi qu'il en soit, voici le code du css. ( EDIT : Ceci est le css généré par sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

Et voici le simple html:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Assez simple? l'espace réservé est désactivé pour une raison quelconque, mais lorsque vous essayez de taper dans le champ de saisie, le texte est aligné. Il semble que vous ne puissiez changer que la couleur (pour webkit) de l'espace réservé, mais si j'essaie de modifier le remplissage de l'entrée contenant, cela détruit la conception de l'entrée! arrache les cheveux

Voici les écrans de l'espace réservé et du champ de saisie avec saisie de texte:

MODIFIER :

Pour l'instant, j'ai eu recours à ce plugin jquery .

Cela fonctionne dès la sortie de la boîte et corrige le problème de mon chrome. Je voudrais toujours découvrir quel est le problème (s'il a quelque chose à voir avec MON chrome ou quelque chose)

Je suis à peu près sûr que ce ne sont pas les styles puisque John Catterfeld l'a reproduit sans problème, alors j'espère que quelqu'un pourra encore m'indiquer dans la bonne direction pourquoi cela m'arrive (le chrome de mon client également. c'est probablement natif de Chrome / OSX si John utilise Windows)

J'ai le même problème.

Je l'ai corrigé en supprimant la hauteur de ligne de mon entrée. Vérifiez s'il y a une hauteur de ligne qui cause le problème

J'ai eu un problème similaire, mon problème était avec le remplissage latéral, et la solution était avec le retrait du texte, je ne savais pas que le retrait du texte affectait la position du côté de l'espace réservé.

input{
  text-indent: 10px;
}

Si vous souhaitez conserver la hauteur de votre ligne et forcer l'espace réservé à avoir la même valeur, vous pouvez directement modifier le CSS de l'espace réservé depuis les versions les plus récentes du navigateur. Cela a fait l'affaire pour moi:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

line-height: normal; 

travaillé pour moi;)

La suppression de la hauteur de ligne aligne en effet votre texte sur votre texte d'espace réservé, mais cela ne résout pas correctement votre problème car vous devez adapter votre conception à cette faille (ce n'est pas un bogue). L'ajout d'alignement vertical ne fera pas l'affaire non plus. Je n'ai pas essayé dans tous les navigateurs, mais cela ne fonctionne pas dans Safari 5.1.4 à coup sûr.

J'ai entendu parler d'un correctif jQuery pour cela, qui n'est pas le support des espaces réservés entre navigateurs (jQuery.placeholder), mais pour le style des espaces réservés, mais je ne l'ai pas encore trouvé.

En attendant, vous pouvez passer au tableau de cette page qui montre la prise en charge de différents navigateurs pour différents styles.

Edit: Trouvé le plugin! jquery.placeholder.min.js vous offre à la fois des capacités de style complètes et une prise en charge de plusieurs navigateurs.

J'ai eu un problème, qui apparaît uniquement dans Internet Explorer. Le champ de saisie a été stylé

height:38px;
line-height:38px;

Malheureusement, dans IE, l'espace réservé initial n'apparaît pas à la bonne position. Mais quand j'ai cliqué dans le champ puis quitté ce champ, l'espace réservé est apparu à la bonne position.

Ma solution était de définir:

line-height:normal;

Le paramètre l'a line-height: 0px;corrigé pour moi dans Chrome

J'ai créé un violon en utilisant votre capture d'écran comme image d'arrière-plan et en supprimant le balisage supplémentaire, et cela semble fonctionner correctement

http://jsfiddle.net/fLdQG/2/ (navigateur Webkit requis)

Est-ce que ça marche pour toi? Sinon, pouvez-vous mettre à jour le violon avec votre balisage et votre CSS exacts?

J'ai remarqué le problème au moment où j'ai mis à jour Chrome sur os x vers la dernière version stable (9.0.597.94), il s'agit donc d'un bogue de Chrome et, espérons-le, sera corrigé.

Je suis tenté de ne même pas essayer de contourner ce problème et d'attendre simplement le correctif. Cela signifiera simplement plus de travail pour le supprimer.

L'espace réservé n'est pas affecté par line-heightet paddingn'est pas cohérent sur les navigateurs.

J'ai cependant trouvé une autre solution.

VERTICAL-ALIGN. C'est probablement la seule fois que cela fonctionne, mais essayez plutôt cela et évitez de nombreuses lignes de code CSS.

Supprimez la hauteur de ligne ou définissez à l'aide du remplissage ... cela fonctionne dans tous les navigateurs

J'ai trouvé la réponse qui a remédié à mes frustrations à ce sujet sur le blog de John Catterfeld .

... Chrome (v20-30) implémente presque tous les styles, mais avec une mise en garde majeure: les styles d'espace réservé ne redimensionnent pas la zone de saisie, alors évitez les éléments tels que la hauteur de ligne et le remplissage en haut ou en bas.

Si vous utilisez la hauteur de ligne ou le remplissage, vous allez être frustré par l'espace réservé qui en résulte. Je n'ai pas trouvé de moyen de contourner cela jusqu'à présent.

Si vous souhaitez déplacer le texte de l'espace réservé vers la droite et laisser le curseur sur l'espace vide, vous devez ajouter un ou plusieurs espaces au début de l'attribut d'espace réservé:

<input type="email" placeholder="  Your email" />

J'ai testé presque toutes les méthodes données ici dans cette page pour mon application Angular. Seulement j'ai trouvé une solution via  qui insère des espaces ie

Matériau angulaire

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

Matériau non angulaire

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>