title: seamless input field css for document in Bootstrap 3
body: <p>I am trying to do the same design as this nice invoice input field - <a href="http://css-tricks.com/examples/EditableInvoice/" rel="nofollow">http://css-tricks.com/examples/EditableInvoice/</a></p>
  
  <p>But as you can see in my Bootstrap 3 form, the input fields look horrible.</p>
  
  <p><a href="http://jsfiddle.net/gV6y8/16/" rel="nofollow">http://jsfiddle.net/gV6y8/16/</a></p>
  
  <pre><code> &lt;input type="text" class="form-control required" value="John Smith"&gt;
  </code></pre>
  
  <p>you could see all those with the input field has a horrible input box.</p>
  
  <p>How can I make it similar as in the example editableinvoice (<a href="http://css-tricks.com/examples/EditableInvoice/" rel="nofollow">http://css-tricks.com/examples/EditableInvoice/</a>)? Basically the idea is the input fields are integrated seamlessly into the form, you don't see the borders, but only highlighted when you click on it and of course editable.</p>