0

I have been looking for how to fix this, I have applied scss and css, also javascript. I need my input to show a placeholder when it opens normally and when you focus on it it will display its label and look small as in this photo I have.

https://i.stack.imgur.com/VxEqE.jpg

This is the input code and the label I’m handling serves me any code, ts, js, css, html.

<label> Contraseña </label>
<input placeholder='Ingrese su contraseña...'                           [class.isinvalid]="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<div *ngIf="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<small *ngIf="loginForm.controls.contrasena.hasError('required')">La contraseña es requerido</small>
</div>
</div>
Ktarch
  • 1
  • 2
  • If you search "CSS floating labels" you will find some tutorials for how to build this pattern. – jack Jun 01 '21 at 18:05

2 Answers2

1

You can find this in angular material library, if you are planning to use in your project with more options. https://material.angular.io/components/form-field/overview#form-field-overview

Else, you can build your custom input from this post.
Move placeholder above the input on focus

Ravi
  • 81
  • 1
  • 8
0

you don't have to hide the placeholder & you can't. you can do it easily --

  1. transform the label a bit down to the exact location of placeholder.
  2. increase the font-size of label.
  3. set focus state of input set the transform of label to normal and decrease the font-size of the label.
  4. to provide transition to this whole process use transition property in css.
  5. to make everything work perfectly add a click handler to the label so that whenever it is clicked it focuses the input. document.getElementById("mytext").focus();
theaman
  • 5
  • 3