web-dev-qa-db-fra.com

Remplissage css d'espace réservé HTML5

J'ai déjà vu ceci post et j'ai déjà 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 pour le CSS. (EDIT: C'est le css généré à partir de 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 code HTML simple:

<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 saisir le champ de saisie, le texte est aligné. Il semble que vous ne pouvez changer que la couleur (pour webkit) de l'espace réservé, mais si j'essaie d'éditer le remplissage de l'entrée contenant, cela détruit le design de l'entrée! arrache les cheveux

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

placeholdertext input

EDIT:

Pour le moment, j'ai eu recours à ceci plugin jQuery .

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

Je suis à peu près sûr que ce ne sont pas les styles puisque John Catterfeld l'a reproduite sans problème. J'espère donc que quelqu'un pourra toujours m'orienter dans la bonne direction pour expliquer pourquoi cela m'arrive (les informations de mon clientchrome _ C'est donc probablement natif de Chrome/OSX si John utilise Windows)

csshtml5google-chromewebkitcss3
126
corroded

J'ai le même problème.

Je l'ai corrigé en supprimant line-height de mon entrée. Vérifiez s'il y a un problème de hauteur de trait qui cause le problème

222
Johansrk

J'avais un problème similaire, mon problème concernait le remplissage latéral, et la solution consistait à, indenter du texte, je ne réalisais pas que l'indenteur du texte avait un effet sur la position du côté de l'espace réservé.

input{
  text-indent: 10px;
}
68
talsibony

Si vous souhaitez conserver votre hauteur de ligne et forcer le paramètre fictif à être identique, vous pouvez modifier directement le code CSS fictif depuis les dernières versions du navigateur. Cela a fait le tour 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;
}
28
floribon
line-height: normal;

travaillé pour moi;)

24
user2264934

J'ai eu un problème, qui apparaît juste 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 lorsque 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;
3
Babs

La définition de line-height: 0px; l'a corrigée dans Chrome.

2
JobJob

Supprimer la hauteur de ligne aligne effectivement votre texte sur votre texte fictif, mais il ne résout pas correctement votre problème car vous devez adapter votre conception à cette faille (ce n'est pas un bug). Ajouter vertical-align 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 ce problème, qui n'est pas une prise en charge d'espace réservé 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 résoudre le problème en le tableau de cette page , qui indique la prise en charge de différents styles par le navigateur.

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

2
zykadelic

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

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

1
will

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

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

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

1
ajcw

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

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

Supprimer la hauteur de ligne ou définir en utilisant un remplissage ... cela fonctionne dans tous les navigateurs

1
Hiren Dihora

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

... Chrome (v20-30) implémente presque tous les styles, mais avec une mise en garde importante: les styles d'espace réservé ne redimensionnent pas la zone de saisie. Restez donc à l'écart des éléments tels que la hauteur de ligne et le remplissage inférieur ou supérieur.

Si vous utilisez line-height ou padding, vous allez être frustré par le paramètre fictif résultant. Je n'ai trouvé aucun moyen de contourner ce problème jusqu'à présent.

1
rb-

L'espace réservé n'est pas affecté par line-height et padding est incohérent sur les navigateurs.

J'ai trouvé une autre solution cependant.

VERTICAL-ALIGN. C’est probablement la seule fois où cela fonctionne, mais essayez plutôt de céder de nombreuses lignes de code CSS.

1
Robin Knight

J'ai testé presque toutes les méthodes données ici dans cette page. Seulement j’ai trouvé la solution via &nbsp; dans mon application matérielle angular, c.-à-d.

matériau angulaire

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

Non Angular Matériel

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

<input type="text" class="pl-3" placeholder="Email">
0
WasiF