How can I simulate a placeholder using a label?

Question

I’m trying to get the label simulate a fixed placeholder.

The biggest difficulty is changing the properties of label when the input receives the focus, and the input fill in the rest of the space automatically.

I tried to use the same technique float:left with overflow:hidden, but it didn’t work.

You could do this using only 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;
}

Code in the Codepen

Answer 1

Adjacent complex selectors can be used, as both elements ( input and label) share the same parent element: form. However, there is one simple condition: the element input must precede label.

In this case, you can choose between using the adjacent brother selector (+) and general adjacent selector (~). The difference between the two is that the general adjacent is more flexible as to the position of the child element after its brother. If it seems confusing, I wrote a very complete article on the operation of selectors.

Despite the flexibility of the general adjacent selector (CSS3), I usually choose the adjacent brother selector because it is CSS 2.1. The solution is simple:

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

And the positioning problems caused by the "condition" can be solved with the property float.

See the result in Jsbin, where I simplified and organized the solution.

Answer 2

I don’t see how to do this only with CSS since you want to change an element when you do focuson the other and they having no degree of kinship among themselves.

So my suggestion is to use javascript. Here’s an example, if you have a library like jQuery or Mootools I can adapt the code to that library.

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

Example