Estou tentando fazer com que o labellabel
simule um placeholder fixo.
A maior dificuldade é alterar as propriedades do labellabel
quando o inputinput
recebe o focusfocus
, e o inputinput
preencher o resto do espaço automaticamente.
Tentei usar a mesma técnica do float leftfloat:left
com overflow hiddenoverflow: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;
}