11

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

7
  • O input deveria ficar na frente da label?
    – Zignd
    Commented 1/01/2014 às 21:00
  • A pergunta não está muito clara para mim, dá para explicar melhor? Quer ter o label por cima (na frente) do input, e desaparecer quando o input receber focus?
    – Sergio
    Commented 1/01/2014 às 22:01
  • O label irá ficar antes do input. Quero deixar o label como tivesse dentro do input. Simulando um placeholder. Commented 1/01/2014 às 22:02
  • Não compreendo que que quer dizer com "antes" e "como tivesse dentro do input". Tendo um elemento por cima com por exemplo z-index superior não deixa clicar no elemento que está por baixo para fazer focus.
    – Sergio
    Commented 1/01/2014 às 22:07
  • 1
    Ainda estou confuso sobre o que você deseja fazer, tente desenhar no post utilizando caracteres box drawing (link Wikipédia)
    – Zignd
    Commented 1/01/2014 às 22:08

2 Respostas 2

11

Pode-se utilizar os seletores complexos adjacentes, já que ambos os elementos ( input e label) compartilham o mesmo elemento pai: form. Entretanto, há uma única e simples condição: o elemento input deve preceder label.

Nesse seu caso, você pode escolher entre usar o seletor irmão adjacente (+) e seletor adjacente geral (~). A diferença entre os dois é que o adjacente geral é mais flexível quanto à posição do elemento filho após seu irmão. Caso pareça confuso, escrevi um artigo bem completo sobre o funcionamento dos seletores.

Apesar da flexibilidade do seletor adjacente geral (CSS3), costumo optar pelo seletor irmão adjacente, por ser do CSS 2.1. A solução é simples:

input:focus, input:focus + label {
  /* estilo */
}

E os problemas de posicionamento acarretados pela "condição" podem ser resolvidos com a propriedade float.

Veja o resultado no JSBin, em que simplifiquei e organizei a solução.

1
  • +1 por citar artigo próprio artigo. Muito boa explicação!
    – Cleiton
    Commented 12/01/2014 às 2:36
7

Não estou a ver como fazer isto só com CSS uma vez que você quer alterar um elemento quando fizer focusno outro e eles não tendo entre si grau de parentesco.

Assim, a minha sugestão é usar javascript. Aqui fica um exemplo, se tiver uma biblioteca como jQuery ou Mootools posso adaptar o código para essa biblioteca.

var label = document.getElementsByTagName('label')[0];
var input = document.getElementsByTagName('input')[0];

label.onclick = function () {
    label.style.display = 'none';
    input.focus();
};
input.onblur = function () {
    if(!this.value) label.style.display = 'block';
};

Exemplo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .