web-dev-qa-db-fra.com

Ajouter un remplissage au champ de saisie HTML

Je veux ajouter un espace à la droite d'un <input type="text" /> afin qu'il y ait un espace vide à la droite du champ.

Donc, au lieu de , J'aurais .

Donc, même comportement, juste un espace vide à droite.

J'ai essayé d'utiliser padding-right, mais cela ne semble rien faire.

Y a-t-il un moyen de faire cela (ou de le simuler)?

htmlcsstextinputtextbox
43
Nathan

padding-right fonctionne pour moi dans Firefox/Chrome sous Windows mais pas dans IE. Bienvenue dans le monde merveilleux de la non-conformité aux normes IE.

Voir: http://jsfiddle.net/SfPju/466/

HTML

<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>

CSS

.foo
{
    padding-right: 20px;
}
60
evan

Vous pouvez fournir un remplissage à une entrée comme celle-ci:

HTML:

<input type=text id=firstname />

CSS:

input {
    width: 250px;
    padding: 5px;
}

mais j'ajouterais aussi:

input {
    width: 250px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

La taille de la boîte fait que la largeur d’entrée reste à 250px au lieu d’augmenter à 260px en raison du remplissage.

Pour référence .

80
Greg

le rembourrage à droite devrait fonctionner. Exemple lié.

http://jsfiddle.net/8Ged8/

5
Jeff Parker

HTML

<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>

Pour les autres navigateurs:

.FieldElement input {
width: 413px;
border:1px solid #ccc;
padding: 0 2.5em 0 0.5em;
}

.searchIcon
{
 background: url(searchicon-image-path) no-repeat;
 width: 17px;
 height: 17px;
 text-indent: -999em;
 display: inline-block;
 left: 432px;
 top: 9px;
}

Pour IE:

.FieldElement input {
width: 380px;
border:0;
}

.FieldElement {
 border:1px solid #ccc;
 width: 455px;     
 }

.searchIcon
{
 background: url(searchicon-image-path) no-repeat;
 width: 17px;
 height: 17px;
 text-indent: -999em;
 display: inline-block;
 left: 432px;
 top: 9px;
}
2
Anbazhagan Devaraj

vous pouvez résoudre ce problème en prenant la balise input dans une div, puis placez la propriété padding sur la balise div. Ce travail est pour moi ...

Comme ça:

<div class="paded">
    <input type="text" />
</div>

et css:

.paded{
    padding-right: 20px;
}
0
Carlos Rafael