@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:
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?
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.
Crie o contêiner ao redor da entrada e do ícone.
Defina a posição do contêiner como relativa
Defina o ícone como posição absoluta. Isso posicionará o ícone em relação ao contêiner ao redor.
Use superior, esquerda, inferior e direita para posicionar o ícone no contêiner.
Defina o preenchimento dentro da entrada para que o texto não se sobreponha ao ícone.
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.
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:20px20px;background-position: right center;}
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.
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).
Respostas:
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 usapadding-left
.Em outras palavras, eles têm essas duas regras CSS:
fonte
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.
Não é "limpo", mas deve funcionar em navegadores mais antigos.
fonte
Uma solução sem imagens de fundo:
fonte
Você pode tentar isso:
fonte
Acho essa a melhor e mais limpa solução para isso. Usando indentação de texto no
input
elementoCSS:
HTML:
fonte
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.
fonte
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.adicione as tags acima ao seu arquivo CSS e use a classe especificada.
fonte
Isso funciona para mim:
fonte
Você pode tentar isso: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
fonte
Basta usar a propriedade background em seu CSS.
fonte
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 abackground
propriedade para ficar acimabackground-image
dela e funcionou.A solução para o meu caso foi:
Só para citar,
border
,padding
etext-align
propriedades não são importantes para a solução. Acabei de replicar meu código original.fonte
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
background
é um nome abreviado de propriedade. Uma correção melhor seria não usar a abreviação, mas usarbackground-color
a propriedade color (assumindo que você queira uma cor e uma imagem).Usando com font-icon
OU
fonte
Por exemplo, você pode usar este: label com entrada oculta (o ícone está presente).
fonte
use esta classe css para sua entrada no início e, em seguida, personalize de acordo:
fonte
Isso funciona para mim para formulários mais ou menos padrão:
fonte