Quiero añadir algo de espacio a la derecha de un <input type="text" /> por lo que hay un espacio vacío a la derecha del campo.

Así, en lugar de Agregar relleno a HTML campo de entrada de texto.

Así mismo comportamiento sólo un espacio vacío a la derecha.

He intentado usar padding-right, pero eso no parece hacer nada.

Hay una manera de hacer esto (o fingir)?

InformationsquelleAutor Nathan | 2011-07-05

6 Comentarios

  1. 68

    padding-right me funciona en Firefox/Chrome en Windows pero no en IE. Bienvenido al maravilloso mundo de la IE normas de no-cumplimiento.

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

    HTML

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

    CSS

    .foo
    {
        padding-right: 20px;
    }
    • Tiene que amar es decir 😀
  2. 90

    Te puede dar relleno a una entrada como esta:

    HTML:

    <input type=text id=firstname />

    CSS:

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

    sin embargo también me gustaría añadir:

    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+ */
    }

    Cuadro de tamaño hace que el ancho de la estancia en el 250px en lugar de aumentar a 260px debido al relleno.

    Para referencia.

    • Que caja de tamaño salvó mi vida 😀
    • Mismo aquí. Gracias por esto!
    • El único ejemplo de trabajo para mí! Gracias Greg!
  3. 3

    HTML

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

    Para Otros Navegadores:

    .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;
    }

    Para 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;
    }
  4. 0

    puede resolver esto, teniendo la input etiqueta en el interior de un div,
    a continuación, poner el relleno de la propiedad en div etiqueta. Este trabajo es para mí…

    Como este:

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

    y css:

    .paded{
        padding-right: 20px;
    }
  5. -1
    <input class="form-control search-query input_style" placeholder="Search…"  name="" title="Search for:" type="text">
    
    
    .input_style
    {
        padding-left:20px;
    }
    • agregar input_style clase en su etiqueta de entrada & añadir este código en el archivo css
    • Agregar más información acerca de la solución

Dejar respuesta

Please enter your comment!
Please enter your name here