html - Customized input text box -


hi want make customized input text box image:

enter image description here

i search many articles found nothing please me

this not new answer. modification answer of @alvaro-menéndez make more compact , generic.

div {      position:relative;      display:inline-block;      margin:50px;  }  input[type="text"] {      width:300px;      padding:10px;      outline:0;      border:0;      background-color: #eee;  }  .preinput {      position:absolute;       z-index:-1;      display:block;      bottom:-1px;      left:-1px;      border-bottom:1px solid #999;      border-right:1px solid #999;      border-left:1px solid #999;      width:100%;      height:20px;        }
<div>      <span class="preinput"></span>      <input type="text" placeholder="search" />  </div>


Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -