Skip to main content
7 de 7
edited tags
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

Como posso simular um placeholder utilizando uma 'label'?

Estou tentando fazer com que o label simule um placeholder fixo.

A maior dificuldade é alterar as propriedades do label quando o input recebe o focus, e o input preencher o resto do espaço automaticamente.

Tentei usar a mesma técnica do float:left com overflow:hidden, mas não funcionou.

Teria como fazer isso usando apenas CSS?

HTML

<article>
  <form>
    <label>Qualquer nome para qualquer tamanho</label>
    <input>
  </form>
</article>

CSS

*{
  margin: 0;
  padding: 0;
}
body{
  font-family: arial;
}
article{
  margin: 5% 0 0 4%;
  width: 50%;
}
label{
  float: left;
  padding: 2%;
  background: #ccc;
  line-heigt: 0;
  font-size: 1em;
  border-radius-right: 3px;
}
form{
  width: 100%;
}
input{
  display: block;
  padding: 2%;
  overflow: hidden;
  border: 0;
  background: #ccc;
  font-family: arial;
  font-size: 1em;
  outline: none;
}
input:focus{
  background: #999;
}

Código no CodePen