1

Eu estou trabalhando no front de um login e estou querendo inserir os ícones de contato para o campo de e-mail e o de cadeado para o de senha. Quero inserir antes da mensagem do placeholder. Eu não estou utilizando Bootstrap. Teria como fazer isso com os seletor ::before? e teria como também utilizar algo análogo ao :nth-child() na hora de passar o endereço desses ícones?

body {
  margin: 0px;
  padding: 0px;
}

.login {
  margin: auto;
  width: 350px;
  height: 540px;
  margin-top: 50px;
  background-color: #cc252f;
  position: relative;
}

.fields {
  margin: auto;
  width: 240px;
  height: 100px;
}

.fields input {
  font-size: 1em;
  width: 98%;
  height: 46%;
  padding-left: 5px;
  margin-top: 2px;
  border-radius: 5px;
  border: 0px;
}
<div class="login">
  <div class="fields">
    <input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"><br>
    <input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha">
  </div>
</div>

3
  • 1
    Parabéns a sua pergunta foi uma das mais bem feitas que vi nas últimas semanas. Mas como vc pode ver aqui não é possível colocar um pseudo elemento direto no input pt.stackoverflow.com/questions/263040/…
    – hugocsl
    Commented 6/06/2019 às 23:31
  • 1
    O mínimo a ser feito quando se precisa de ajuda e deixar a pergunta o mais clara possível. Que bom que achou que ela ficou bem feita, a tendência aqui é melhorar. Abs! Commented 7/06/2019 às 4:13
  • 1
    Lucas o que vejo aqui é que a maioria quer ajuda, mas tem preguiça até de escrever uma pergunta com detalhes. Tem gente que chega a postar uma imagem e falar "Quero isso" e só. Sim sempre buscamos nos tornar melhor, por isso fiz uma edição na resposta haha. Abs 💪
    – hugocsl
    Commented 7/06/2019 às 11:09

2 Respostas 2

1

Fiz uma opção de ícone usando o FontAwesome no pseudo elemento da label não do input, pois o input não aceita pseudo elemento como vc pode ver no link que comentei acima. Aqui vc pode conferir os demais ícones https://fontawesome.com/

Vc pode usar nth-child(3), mas tem que ser 3 pq tem um elemento BR entre um input e outro. Mas repare que só no content="" do ::after eu mudei de um ícone para o outro

inserir a descrição da imagem aqui

Segue código da imagem acima:

body {
	margin: 0px;
	padding: 0px;
}

.login {
	margin: auto;
	width: 350px;
	height: 540px;
	margin-top: 50px;
	background-color: #cc252f;
	position: relative;
}

.fields {
	margin: auto;
	width: 240px;
	height: 100px;
}

.fields input {
	font-size: 1em;
	width: 98%;
	height: 46%;
	margin-top: 2px;
	border-radius: 5px;
	border: 0px;
	box-sizing: border-box;
	padding-left: 30px;
}
label {
	position: relative;
}
label::after {
	font-family: FontAwesome;
	float: left;
	margin-left: -1.5em;
	content: "\f007";
	color: #000;

	left: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
label:nth-child(3)::after {
	content: "\f13e";
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="login">
	<div class="fields">
		<label><input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"></label>
		<br>
		<label><input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha"></label>
	</div>
</div>

1

Uma forma bacana é usar uma imagem como sprite (pode ser um PNG com fundo transparente, um GIF ou um JPG com fundo branco). Aí basta adicionar a imagem como background do input posicionando cada ícone do sprite no respectivo input.

No exemplo abaixo usei a imagem abaixo com formato PNG, com as dimensões de 33x100 pixels:

inserir a descrição da imagem aqui

É preciso que a imagem seja vertical e tenha uma altura par onde cada ícone será centralizado verticalmente em cada metade, ou seja, 50px.

No CSS você posiciona cada ícone nos eixos X e Y. No caso do eixo X (horizontal) eu dei um espaçamento de 10px para não colar na borda do input, e no input do password eu posicionei -40px (metade) para que o background suba mostrando o segundo ícone. E também usei um padding-left nos inputs para que o texto não fique por cima dos ícones, compensando a largura dos ícones.

Também é preciso ajustar o width dos inputs para deduzir o padding-left aplicado. Para isso você usa o calc, subtraindo a largura dos inputs pelo padding-left aplicado:

width: calc(98% - 48px);

Analisando o CSS você vai entender como funciona e o resultado:

body {
  margin: 0px;
  padding: 0px;
}

.login {
  margin: auto;
  width: 350px;
  height: 540px;
  margin-top: 50px;
  background-color: #cc252f;
  position: relative;
}

.fields {
  margin: auto;
  width: 240px;
  height: 100px;
}

.fields input {
  font-size: 1em;
  width: calc(98% - 48px);
  height: 46%;
  padding-left: 48px;
  margin-top: 2px;
  border-radius: 5px;
  border: 0px;
}

#email, #pwd{
   background: url(https://i.sstatic.net/VqyJ8.png) #fff no-repeat;
}

#email{
   background-position: 10px 12px;
}

#pwd{
   background-position: 10px -40px;
}
<div class="login">
  <div class="fields">
    <input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"><br>
    <input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha">
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .