Skip to main content
título editado
Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

como Como adicionar ícones antes do placeholder

removeu 618 caracteres do conteúdo; tags editadas
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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 placeholderplaceholder. Eu não estou utilizando Bootstrap. Teria como fazer isso com os seletor ::before::before? e teria como também utilizar algo análogo ao :nth-child():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;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="_css/newlogin.css">
    <title>HEMOGRAM</title>
</head>

<body>
  <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>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

uma logo e um título antecede esses campos, mas não coloquei aqui por razões confidenciais (espero que entendam).

Desde já agradeço qualquer tipo de ajuda rapazes!

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;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="_css/newlogin.css">
    <title>HEMOGRAM</title>
</head>

<body>
  <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>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

uma logo e um título antecede esses campos, mas não coloquei aqui por razões confidenciais (espero que entendam).

Desde já agradeço qualquer tipo de ajuda rapazes!

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>

Fonte Link

como adicionar ícones antes do placeholder

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;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="_css/newlogin.css">
    <title>HEMOGRAM</title>
</head>

<body>
  <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>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

uma logo e um título antecede esses campos, mas não coloquei aqui por razões confidenciais (espero que entendam).

Desde já agradeço qualquer tipo de ajuda rapazes!