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;
}