Skip to main content
etiquetas editadas
Enlace
Shaz
  • 29.2k
  • 18
  • 40
  • 61
se añadieron 38 caracteres en el cuerpo
Origen Enlace
May
  • 583
  • 8
  • 27

Cómo crear un placeholder label tipo la plataforma   wixtipo 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>

Cómo crear 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="">

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>

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>

Origen Enlace
May
  • 583
  • 8
  • 27

¿Cómo crear un placeholder label?

Cómo crear 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="">

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>