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)
la source
Réponses:
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
la source
line-height: normal;fait l'affaire pour moiJ'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é.
la source
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:
la source
travaillé pour moi;)
la source
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.
la source
J'ai eu un problème, qui apparaît uniquement dans Internet Explorer. Le champ de saisie a été stylé
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:
la source
Le paramètre l'a
line-height: 0px;corrigé pour moi dans Chromela source
line-heightentièrement l' attribut de l'élément. Pour moi, cela n'a rien fait, et ce qui a résolu le problème pour moi était de définirline-height: 0pxJ'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?
la source
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.
la source
L'espace réservé n'est pas affecté par
line-heightetpaddingn'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.la source
Supprimez la hauteur de ligne ou définissez à l'aide du remplissage ... cela fonctionne dans tous les navigateurs
la source
J'ai trouvé la réponse qui a remédié à mes frustrations à ce sujet sur le blog de John Catterfeld .
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.
la source
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é:
la source
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 ieMatériau angulaire
Matériau non angulaire
la source