<div class="textbox"> <input id="name" type="text" placeholder="Your name" /> <label for="name">Name</label> </div> <div class="textbox"> <input id="email" type="email" placeholder="Your email" /> <label for="email">Email</label> </div> <div class="textbox"> <input id="phone" type="tel" placeholder="Your phoneNumber" /> <label for="phone">Phone</label> </div>
body{ display: flex; flex-direction: column; align-items: center; margin-left: -78px; } .textbox { position: relative; width: 250px; margin: 30px 0 0 5px; padding: 0 0 0 73px; } input { box-sizing: border-box; width: 250px; padding: 10px 0 10px 15px; border-radius: 3px; border: 1px solid #00a5a0; background: #fff; outline: 0; transition: all ease-in-out 0.3s; &::-webkit-input-placeholder { color: #fff; } + label { position: absolute; top: 0; left: 73px; padding: 6.5px 15px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: #00a5a0; color: #fff; transition: all ease-in-out 0.3s; } &:focus { border-top-left-radius: 0; border-bottom-left-radius: 0; background: #fff; &::-webkit-input-placeholder { color: #aaa; } + label { left: 1px; } } }