Skip to main content
edited tags
Link
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228
Formatação do código, reformulação do título, colocação das referências a elementos HTML dentro da marcação de código.
Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

Simular Como posso simular um placeholder com labelutilizando uma 'label'?

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

Código no CodePen

Simular placeholder com label

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

Como posso simular um placeholder utilizando uma 'label'?

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

added 278 characters in body
Fonte Link

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{
    widthmargin: 50%;5% background0 0 4%;
width: red;50%;
} 

label{
    float: left;
  padding: 2%;
  background: #ccc;
 padding line-rightheigt: 2%;0;
  font-size: 1em;
  backgroundborder-radius-right: green;3px;
} 

form{width: 100%;}

input{
    display: block;
    padding: 2%;
    overflow: hidden;
    border: 0;
    background: green;#ccc;
    font-family: arial;
    font-size: 1em;
    outline: none;
}

input:focus{
  background: #999;
}

Código no CodePen

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

Código no CodePen

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

Atualizado o link para o código no CodePen
Fonte Link
Zignd
  • 7mil
  • 6
  • 36
  • 59
Carregando
deleted 81 characters in body
Fonte Link
Carregando
Sempre coloque seu código na pergunta ou resposta
Fonte Link
Zignd
  • 7mil
  • 6
  • 36
  • 59
Carregando
Fonte Link
Carregando