Poner el icono dentro del elemento de entrada en un formulario

273

¿Cómo pongo un icono dentro del elemento de entrada de un formulario?

Captura de pantalla de un formulario web con tres entradas que tienen iconos

Versión en vivo en: tema Tidal Force

akif
fuente
2
@IvanSokalskiy Eso supone que alguien está usando Bootstrap. ¡No todos los que se encuentren con esto usarán Bootstrap!
Barry Michael Doyle

Respuestas:

394

El sitio que vinculó utiliza una combinación de trucos CSS para lograr esto. Primero, usa una imagen de fondo para el <input>elemento. Luego, para empujar el cursor, utiliza padding-left.

En otras palabras, tienen estas dos reglas CSS:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
Dan Lew
fuente
2
¿Podría describir más sobre los parámetros superior e izquierdo (7px 7 px) y otros atributos? Eso debe ser útil.
QMaster
262
Consejo: deje de usar y apoyar IE 8.
un codificador
3
¿Cómo puedo alinear la imagen con el extremo derecho del campo de entrada?
ishanbakshi
3
El problema con las imágenes de fondo es que el autocompletado de Chrome elimina la imagen de fondo y hace que el fondo se vuelva completamente amarillo
Cătălin Rădoi
1
Para alinearse con el uso correcto: background-position: right;
Raison
52

Las soluciones CSS publicadas por otros son la mejor manera de lograr esto.

Si eso le causa algún problema (lea IE6), también puede usar una entrada sin bordes dentro de un div.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

No como "limpio", pero debería funcionar en navegadores antiguos.

harpo
fuente
2
Una buena adición a esta respuesta. a veces es decir, da problemas y esta es una buena manera de resolver uno de ellos. funcionó para mí, aunque con un lapso en su lugar.
Ross
¡Buena manera de agregar estructuras más complejas dentro de las entradas!
jonhue
@ Jonhue, no recomendaría esto a menos que todavía vivas en la década anterior y necesites soportar IE6. Incluso entonces, no lo llamaría "limpio".
harpo
@harpo ¿Cómo incluirías enlaces dentro de las entradas?
jonhue
35

Una solución sin imágenes de fondo:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}
<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

majid savalanpour
fuente
34

Puedes probar esto:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}
Alan Haggai Alavi
fuente
26

Me parece la mejor y más limpia solución. Usar sangría de texto en el inputelemento

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
Oxido
fuente
3
Estoy apoyando la sangría de texto porque el relleno izquierdo aumentará el ancho del campo y se desbordará del elemento principal.
Kostiantyn
1
¿por qué pusiste el estilo en línea en lugar de en el #icon css?
Wylliam Judd
@WylliamJudd Eso es solo para fines de demostración :)
Rust
¿Por qué usaste id en lugar de clase?
Majid Savalanpour
9

Una manera simple y fácil de colocar un icono dentro de una entrada es usar la propiedad de posición CSS como se muestra en el código a continuación. Nota: he simplificado el código por motivos de claridad.

  1. Cree el contenedor que rodea la entrada y el ícono.
  2. Establecer la posición del contenedor como relativa
  3. Establezca el icono como posición absoluta. Esto posicionará el icono en relación con el contenedor circundante.
  4. Use arriba, izquierda, abajo, derecha para colocar el icono en el contenedor.
  5. Establezca el relleno dentro de la entrada para que el texto no se superponga con el icono.

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}
<div id="input-container">
  <img/>
  <input/>
</div>

Ryan Forte
fuente
1
Limpio y simple, sí. También debe eliminar el borde de entrada con input { border: none; }y agregar el borde para #input-container { border: 1px solid #000; }que parezca que la imagen está dentro y es parte de la entrada.
Mario Werner
1
@MarioWerner empujó la imagen dentro de la entrada, no es necesario hacer hacks de borde, esa es la belleza. Voy a usar la idea.
The Fool
8
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

agregue las etiquetas anteriores en su archivo CSS y use la clase especificada.

Rafi Haidari
fuente
6

Esto funciona para mi:

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

Gxzzin
fuente
la imagen desaparece cuando se completa automáticamente en Chrome
Neptuno
¿Cómo se puede hacer clic en la imagen, por ejemplo, si se usa un icono "guardar"?
user460114
Me funcionó para mi aplicación híbrida, solo hice clic en el cuadro de entrada completo después de insertar la imagen.
shivam srivastava
5

Puede probar esto: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>





Hasan
fuente
4

Simplemente use la propiedad de fondo en su CSS.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}
Dan Walker
fuente
4

Tuve una situación como esta. No funcionó por eso background: #ebebeb;. Quería poner el fondo en el campo de entrada y esa propiedad se mostraba constantemente en la parte superior de la imagen de fondo, ¡y no podía ver la imagen! Entonces, moví la backgroundpropiedad para que esté por encima de la background-imagepropiedad y funcionó.

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

La solución para mi caso fue:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

Solo por mencionar, border, paddingy text-alignpropiedades no son importantes para la solución. Acabo de replicar mi código original.

fantja
fuente
1
Esto es muy antiguo y espero que hayas aprendido desde hace más de un año, pero backgroundes un nombre de propiedad abreviado que usas para cubrir todas las propiedades de fondo a la vez: background: [color] [image url] [repeat] [position]y es por eso que tu color estaba sobrescribiendo todo. También podría haberlo dejado en su lugar y renombrar la propiedad abackground-color
borbulon
@borbulon sí, tienes razón. casi siempre es mejor usar el nombre abreviado de la propiedad, totalmente de acuerdo en eso. Pero el propósito de esta publicación es señalar que el orden de las propiedades a veces es importante, y esas reglas CSS 'pequeñas' pueden ser muy frustrantes, especialmente para los recién llegados en desarrollo.
fantja
1
Totalmente de acuerdo, pero el punto sigue en pie: backgroundes un nombre de propiedad abreviado. Una solución mejor hubiera sido no usar la taquigrafía, sino usarla background-colorpara la propiedad de color (suponiendo que desea tanto un color como una imagen).
borbulon
3

Utilizando con font-icon

<input name="foo" type="text" placeholder="&#61447;">

O

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}
Ali Göksel Bektaş
fuente
77
Parece que :: before no se puede aplicar del elemento de entrada.
Vishnja
2

use esta clase css para su entrada al inicio, luego personalícela en consecuencia:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">

csandreas1
fuente
¿sabe cómo configurar un evento de clic solo para esta imagen?
Arjun
1
 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

Por ejemplo, puede usar esto: etiqueta con entrada oculta (el icono está presente).

yazabara
fuente
0

Esto funciona para mí para formas más o menos estándar:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
Yan D
fuente