<div class="textbox"> <label for="name"> <input id="name" type="text" placeholder="Name" /> </label> </div> <div class="textbox"> <label for="email"> <input id="email" type="email" placeholder="Email" /> </label> </div> <div class="textbox"> <label for="phone"> <input id="phone" type="tel" placeholder="PhoneNumber" /> </label> </div>
.textbox { position: relative; width: 250px; margin: 30px auto; } input { width: 250px; padding: 3%; border: 1px solid #1b2538; border-radius: 4px; color: #1b2538; font-size: 1.4rem; transition: all ease-in-out 0.3s; &::-webkit-input-placeholder { color: #aaa; } &::placeholder { color: #aaa; } } input:focus { border: 1px solid #00a5a0; outline: none; box-shadow: 0 0 5px 3px #00a5a0; }