<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="input"> <div class="inner" contenteditable=true placeholder="Search..."></div> </div> </div>

body { background-color: #0024b1; color: white; } .input { font-size: 2em; max-width: calc(100vw - 12px) } .input::after { content: ''; position: relative; display: block; border-bottom: 3px solid #333333; top: -3px; } .inner { position: relative; display: inline-block; padding: .5em 0; border-bottom: 3px solid white; z-index: 1; font-family: Roboto Slab, sans-serif; } .inner:focus { border-color: #fbc91b; } .inner:empty { border-color: transparent; width: 100%; } .inner:empty::before { content: attr(placeholder); cursor: text; color: #757575; } .inner:focus { outline: 0; }