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;}
article{
width: 50%; background: red;
}
label{
float: left;
padding-right: 2%;
background: green;
}
form{width: 100%;}
input{
overflow: hidden;
border: 0; background: green;
font-size: 1em;
outline: none;
}