HTML5 placeholder CSS padding
j'ai déjà vu ce post et j'ai essayé tout ce que j'ai pu pour changer le rembourrage pour mon placeholder mais hélas, il semble qu'il ne veut tout simplement pas coopérer.
en tout cas, voici le code pour le css. ( EDIT : C'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 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 éteint pour une raison quelconque, mais lorsque vous essayez de taper dans le champ de saisie de texte, le texte est aligné. Il semble que vous ne pouvez changer que la couleur (pour webkit ) du placeholder, mais si j'essaie d'éditer le rembourrage de l'entrée contenant, il casse la conception de l'entrée! tire les cheveux
voici les screenies du placeholder et du champ d'entrée avec entrée de texte:
EDIT :
pour l'instant j'ai eu recours à ce jQuery plugin .
il fonctionne directement de la boîte et il corrige le problème de mon chrome. Je voudrais quand même découvrir quel est le problème (s'il a quelque chose à voir avec mon chrome ou quelque chose comme ça)
Je suis presque sûr que ce n'est pas les styles puisque John Catterfeld l'a reproduit sans problème, donc j'espère que quelqu'un là-bas pourrait encore me pointer à la bonne direction quant à la raison pour laquelle cela se produit à moi(chrome de mon client aussi bien. Donc c'est probablement natif de Chrome / OSX si John utilise windows)
12 réponses
j'ai eu 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 un peu de jeu de ligne qui cause le problème
j'ai eu un problème similaire, mon problème était avec le rembourrage latéral, et la solution était avec, text-indent, Je ne me suis pas rendu compte que l'effet de l'indentation textuelle l'emplacement latéral du placeholder.
input{
text-indent: 10px;
}
si vous voulez garder votre ligne-hauteur et forcer le placeholder à avoir la même, vous pouvez éditer directement le placeholder CSS depuis les nouvelles versions de 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;
}
j'ai eu un problème, qui apparaît juste dans internet explorer. Le champ d'entrée était intitulé
height:38px;
line-height:38px;
malheureusement dans IE le placeholder initial apparaît pas à la bonne position. Mais quand j'ai cliqué dans le champ et puis quitté ce champ, le placeholder est apparu sur la bonne position.
ma solution était de fixer:
line-height:normal;
supprimer la hauteur de ligne rend en effet votre texte aligné avec votre placeholder-texte, mais il ne résout pas correctement votre problème puisque vous avez besoin d'adapter votre conception à ce défaut (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 il ne fonctionne pas dans Safari 5.1.4 pour vous.
j'ai entendu parler d'une correction de jQuery pour ceci, qui n'est pas cross-browser placeholder support (jQuery.placeholder), mais pour les placeholders de style, mais je n'ai pas encore trouvé.
dans l'intervalle, vous pouvez résoudre à le tableau sur cette page qui montre le soutien de navigateur différent pour différents styles.
Edit: Trouvé le plugin! jquery.réservé.min.js vous offre à la fois des fonctionnalités complètes de style et un support multi-navigateur.
j'ai créé un violon en utilisant votre screenshot comme image de fond et en enlevant la marge supplémentaire, et il semble bien fonctionner
http://jsfiddle.net/fLdQG/2 / (navigateur webkit requis)
ça vous va? Si non, Pouvez-vous mettre à jour le fiddle avec votre marque exacte et CSS?
j'ai remarqué le problème au moment où J'ai mis à jour Chrome sur os x à la dernière version stable (9.0.597.94) il s'agit donc d'un bug Chrome et j'espère qu'il sera corrigé.
je suis tenté de ne même pas essayer de travailler autour de cela et juste attendre la solution. Ce sera juste plus de travail pour l'enlever.
le paramètre n'est pas affecté par line-height et padding est incohérent sur les navigateurs.
j'ai trouvé une autre solution.
VERTICAL-ALIGN . C'est probablement la seule fois où cela fonctionne, mais essayez cela à la place et de céder de nombreuses lignes de code CSS.
supprimer la ligne-hauteur ou mis en utilisant le rembourrage...il fonctionne dans tous les navigateurs
j'ai trouvé la réponse qui remédiait à mes frustrations à ce sujet sur le blog de John Catterfeld .
... Chrome (v20-30) met en œuvre presque tous les styles, mais avec une mise en garde majeure – les styles de placeholder ne redimensionnent pas la boîte de saisie, donc restez à l'écart des choses comme la ligne-hauteur et le rembourrage haut ou bas.
si vous utilisez line-height ou padding vous allez être frustré par le résultat réservé. Je n'ai pas trouvé un moyen de contourner ce jusqu'à ce point.