Coloque o ícone dentro do elemento de entrada em um formulário


272

Como coloco um ícone dentro do elemento de entrada de um formulário?

Captura de tela de um formulário da web com três entradas com ícones

Versão ao vivo em: Tema Tidal Force


2
@IvanSokalskiy Isso supõe que alguém esteja usando o Bootstrap. Nem todo mundo que se deparar com isso estará usando o Bootstrap!
Barry Michael Doyle

Respostas:


392

O site que você vinculou usa uma combinação de truques de CSS para fazer isso. Primeiro, ele usa uma imagem de plano de fundo para o <input>elemento. Então, para empurrar o cursor, ele usa padding-left.

Em outras palavras, eles têm essas duas regras CSS:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

2
Você poderia descrever mais sobre os parâmetros superior e esquerdo (7px 7 px) e outros atributos? Isso deve ser útil.
QMaster 27/01

262
Conselho: pare de usar e dar suporte ao IE 8.
a coder

3
como alinhar a imagem à extremidade direita do campo de entrada?
Ishanbakshi #

3
O problema com imagens de fundo é que o preenchimento automático do Chrome remove a imagem de fundo e faz o fundo amarelo completamente
Cătălin Rădoi

1
Para alinhar com o uso correto: background-position: right;
raison

52

As soluções CSS postadas por outros são a melhor maneira de conseguir isso.

Se isso lhe der problemas (leia IE6), você também pode usar uma entrada sem borda dentro de uma div.

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

Não é "limpo", mas deve funcionar em navegadores mais antigos.


2
um bom complemento para esta resposta. às vezes, ou seja, dá problemas e esta é uma boa maneira de resolver um deles. trabalhou para mim, embora com um espaço em seu lugar.
Ross

Ótima maneira de adicionar estruturas mais complexas dentro das entradas!
jonhue

@ Jonhue, eu não recomendaria isso, a menos que você ainda esteja vivendo na década anterior e precise apoiar o IE6. Mesmo assim, eu não chamaria isso de "limpo".
Harpo

@harpo Como você incluiria links dentro de entradas?
jonhue

35

Uma solução sem imagens de fundo:

#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>


34

Você pode tentar isso:

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

26

Acho essa a melhor e mais limpa solução para isso. Usando indentação de texto no 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" />

3
Apoio o recuo de texto porque o preenchimento à esquerda aumentará a largura do campo e sairá do elemento pai.
precisa

1
por que você colocou o estilo embutido em vez do CSS #icon?
Wylliam Judd

@WylliamJudd Isso é apenas para fins de demonstração :)
Rust

por que você usou id em vez de classe?
majid savalanpour 14/06

9

Uma maneira simples e fácil de posicionar um ícone dentro de uma entrada é usar a propriedade CSS da posição, conforme mostrado no código abaixo. Nota: simplifiquei o código para fins de clareza.

  1. Crie o contêiner ao redor da entrada e do ícone.
  2. Defina a posição do contêiner como relativa
  3. Defina o ícone como posição absoluta. Isso posicionará o ícone em relação ao contêiner ao redor.
  4. Use superior, esquerda, inferior e direita para posicionar o ícone no contêiner.
  5. Defina o preenchimento dentro da entrada para que o texto não se sobreponha ao ícone.

#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>


1
Limpo e simples, sim. Você também deve remover a borda de entrada input { border: none; }e adicioná #input-container { border: 1px solid #000; }-la para parecer que a imagem está dentro e realmente faz parte da entrada.
Mario Werner

1
@MarioWerner ele empurrou a imagem para dentro da entrada, não há necessidade de fazer ataques de fronteira, essa é a beleza. Eu vou usar a ideia.
The Fool

8
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

adicione as tags acima ao seu arquivo CSS e use a classe especificada.


6

Isso funciona para mim:

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>


a imagem desaparece quando o preenchimento automático no chrome
netuno

Como você clica na imagem, por exemplo, se estiver usando um ícone "salvar"?
user460114

Funcionou para mim no meu aplicativo híbrido, apenas tornei clicável toda a caixa de entrada após a inserção da imagem.
shivam srivastava

5

Você pode tentar isso: 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>






4

Basta usar a propriedade background em seu CSS.

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

#foo
{
    background: url(/img/foo.png);
}

4

Eu tive uma situação como essa. Não funcionou por causa de background: #ebebeb;. Eu queria colocar o plano de fundo no campo de entrada e essa propriedade aparecia constantemente na parte superior da imagem de fundo, e não conseguia ver a imagem! Então, mudei a backgroundpropriedade para ficar acima background-imagedela e funcionou.

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

A solução para o meu caso foi:

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

Só para citar, border, paddinge text-alignpropriedades não são importantes para a solução. Acabei de replicar meu código original.


1
Isso é super antigo e espero que você tenha aprendido há mais de um ano, mas backgroundé um nome abreviado de propriedade usado para cobrir todas as propriedades do plano de fundo de uma só vez: background: [color] [image url] [repeat] [position]e é por isso que sua cor estava substituindo tudo. Você também pode tê-lo deixado no lugar e renomeado a propriedade parabackground-color
borbulon

@borbulon sim, você está certo. quase sempre é melhor usar o nome abreviado da propriedade, concordo totalmente com isso. Mas o objetivo deste post é apontar que a ordem das propriedades às vezes é importante, e essas 'pequenas' regras de CSS podem ser muito frustrantes, especialmente para os novatos em desenvolvimento.
fantja

1
Concordo totalmente, mas o ponto ainda permanece: backgroundé um nome abreviado de propriedade. Uma correção melhor seria não usar a abreviação, mas usar background-colora propriedade color (assumindo que você queira uma cor e uma imagem).
borbulon

3

Usando com font-icon

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

OU

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

7
Parece que :: before não pode ser aplicado ao elemento de entrada.
Vishnja

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 exemplo, você pode usar este: label com entrada oculta (o ícone está presente).


1

use esta classe css para sua entrada no início e, em seguida, personalize de acordo:

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


você sabe como definir o evento de clique apenas para esta imagem.?
Arjun

0

Isso funciona para mim para formulários mais ou menos padrão:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.