Home / Questions / 83390
Accepted
May
Asked: 2020-07-04 08:43:01 +0800 CST 2020-07-04 08:43:01 +0800 CST

How to create a placeholder label?

  • 772

How to create a placeholder label type the wix platform if you can see when clicking on the Email input itplaceholder does not disappear if it is not on top.

When copying to the Wixinput form element, it can be seen that the function does not exist in the formplaceholder

<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="">

How can I add that effect in My code

.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>

html

1 Answers

  1. Best Answer

    It's a Material Design component known as a Text Field and can indeed be created with a bit of html and css. This is an example taken from 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>

    • 3