label-in-input

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">

<div class="row">

<div class="col-12 mb-3 pl-0">
      <div class="labelInsideBlock">
        <span>AD SOYAD</span>
        <input type="text" class="form-control labelInside" />
      </div>
</div>


<div class="col-12 mb-3 pl-0">

      <div class="labelInsideBlock">
        <span>E-POSTA</span>
        <input type="text" class="form-control labelInside" />
      </div>
      
</div>

<div class="col-12 mb-3 pl-0">
      <div class="labelInsideBlock"><span>ŞİFRE</span><input type="password" class="form-control labelInside" /></div>
</div>

<div class="col-12 pl-0">
      <button type="button" class="btn btn-lg btn-success w-100">
      GÖNDER
      </button>
</div>


</div>
</div>

CSS

.labelInsideBlock > span {
    font-family: verdana;
    font-size: .6em;
    z-index: 9999;
    position: absolute;
    left: 15px;
    top: 10px;
    color: #999 !important;
    background:Red;
}

.labelInside {
    position: relative;
    font-family: verdana;
    padding-top: 25px !important;
    padding-bottom: 10px !important;
    height: unset !important;
}