CodePen

HTML

            
              <div class="form">
  <input type="text" />
  <input type="text" />
</div>
            
          
!

CSS

            
              * { box-sizing: border-box; }
body { background: url(http://simplypx.com/images/forminputs_groovepaper.png) repeat; }

.form { width: 500px; margin: 100px auto; }

input[type="text"] { 
  border: 10px solid #fdfdfd;
  border-radius: 40px; 
  box-shadow: inset 0 -1px 0 rgba(255,255,255,1), inset 0 -3px 35px rgba(200,200,200,0.1), inset 0 20px 45px rgba(100,100,100,0.1), inset 0 2px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2);
  width: 100%;
  height: 80px;
  outline:none;
  padding: 0 0 0 20px;
  font-size: 20px;
  color: #999;
  transition: box-shadow 0.3s ease;
  margin-bottom: 30px;
}
input[type="text"]:focus { 
  box-shadow: inset 0 -1px 0 rgba(255,255,255,1), inset 0 -3px 35px rgba(150,150,150,0.1), inset 0 20px 45px rgba(100,100,100,0.1), inset 0 2px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2), 0 0 10px rgba(232,48,208,0.5);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................