[Solved] Is it possible to put element inside input field?

by


The best way to do this could be having an element with postion: absolute and place it above the input field. Try this code.

<form class="box-login"  >

        <div class="box-inputs">
            <span class="icon"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/102-128.png"></span>
            <label class="box-input" for="cpf"></label>
            <input class="line-input" id="cpf" type="text" placeholder="CPF">
        </div>

        <div class="box-inputs">
            <span class="icon"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/102-128.png"></span>
            <label for="box-input">
            <input class="line-input" id="password" type="password" placeholder="Senha">
            </label>

        </div>
        <div>
            <button class="btn-login">ENTRAR</button>
</div>
</form>

.box-login{width:300px;height:auto;margin:0 auto}
 .box-login .bots{width:100%;height:auto;margin:0;border-radius:3px;-webkit-border-radius:3px;-moz-border-radx-inpuius:3px;-ms-border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2);-webkit-box-shadow:0 0 4px rgba(0,0,0,.2);-moz-box-shadow:0 0 4px rgba(0,0,0,.2);-ms-box-shadow:0 0 4px rgba(0,0,0,.2);background-color:#fff;position:relative}

 .box-login .box-inputs .line-input{width:100%;height:50px;padding-left:40px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;
border-left:0px;
border-top: 0px;
border-right:0px;
 }

 .box-login .btn-login{width:100%;margin:0;height:50px;color:#fff;border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;background-color:#009edb;


    border: none;}

  .box-inputs {
    position: relative;
  }
  .box-inputs .icon {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 10px;
    z-index: 2;
  }
  .box-inputs .icon img {
    width: 100%;
  }

1

solved Is it possible to put element inside input field?