web-profile

Hide placeholder text on focus

html:

<p>
  <input type="text" class="form-control" placeholder="placeholder text" />
</p>
<p>
  <input type="text" class="form-control" placeholder="placeholder text" />
</p>

css:

.form-control:focus::placeholder {
  color: transparent;
}

.form-control:focus::-webkit-input-placeholder {
  color: transparent;
}

.form-control::focus:-ms-input-placeholder {
  color: transparent;
}

Leave a Reply

Your email address will not be published.