5

Cómo crear un placeholder label tipo la plataforma wix si se puede observar al dar clic en el input Email el placeholder no desaparece si no se encima en la parte superior.

Al copiar al elemento del formulario Wix, se puede observar que no existe en el formulario input la función placeholder

<input autofocus="" default-email="" name="email" ng-attr-wix-mail-validator="{{!$ctrl.novalidateEmail()}}" ng-model="$ctrl.email" required="" type="email" class="ng-pristine ng-scope md-input ng-empty ng-valid-email ng-invalid ng-invalid-required ng-touched" id="input_0" wix-mail-validator="true" style="">

Cómo puedo añadir aquel efecto en Mi código

.form-two {
outline: none;
color: #212121;
font-size: 13px;
border: 1px solid #f2f2f2;
background: none;
width: 100%;
padding: 1.2em 1.8em;
margin-bottom: 1.5em;
}
.center {
  text-align: center;
}
.left {
  float: left;
}

.right {
  float: right;
}
<div class="center">
  <div class="container">
<div class="wrp">
    <h2>ENTRE AQUÍ.</h2>
    <form action="#" method="post">
	    <!-- class="form-one"  -->
	    <div class="left">
	      <input type="text" class="form-two" name="First Name" placeholder="Nombre">
	    </div>
			<div class="right">
			  <input type="text" class="form-two" name="Last Name" placeholder="Apellidos">
			</div>
</div>
  </div>
</div>

1 respuesta 1

3

Es un componente de Material Design conocido como Text Field y se puede crear en efecto con un poco de html y css. Este es un ejemplo tomado de CodePen:

* { box-sizing:border-box; }

.container { 
  margin:30px auto 0; 
  padding:10px 50px 50px;
}

.group { 
  position:relative; 
  margin-bottom:45px; 
}

input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}

input:focus {
  outline:none;
}

label {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

.bar {
  position:relative; 
  display:block;
  width:300px; 
}

.bar:before, .bar:after {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.bar:before {
  left:50%;
}

.bar:after {
  right:50%; 
}

input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
<div class="container">
    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Nombre</label>
    </div>
</div>

2
  • Gracias @Shaz por el ejemplo ;)
    – May
    el 3 jul. 2017 a las 17:31
  • Estoy tratando de hacer algo parecido pero con un input del tipo email. Es para una subscripcion al newsletter de una pagina ecommerce. el 28 oct. 2020 a las 19:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.