title: Input border CSS
body: <p>I am having trouble with my input borders. When I change the border width property, it changes the width of the entire input. However, I want the input's width to be 100%. Here's my code:</p>
  
  <p>CSS </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
        width: 170px;
      }
      textarea {
        border-color: #eee;
        border-width: 1px;
      }
      label, textarea, input {
        width: 100%;
        display: block;
      }
      input {
        border-style: solid;
        border-width: 1px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
     &lt;form&gt;
          &lt;label for="comments"&gt;Comments&lt;/label&gt;
          &lt;textarea name="comments" rows="5"&gt;&lt;/textarea&gt;
          &lt;label for="date"&gt;Date&lt;/label&gt;
          &lt;input type="text" name="date"&gt;
          &lt;label for="time"&gt;Time&lt;/label&gt;
          &lt;input type="text" name="time"&gt;
          &lt;label for="longitude"&gt;Longitude&lt;/label&gt;
          &lt;input type="text" name="logitude"&gt;
          &lt;label for="latitude"&gt;Latitude&lt;/label&gt;
          &lt;input type="text" name="latitude"&gt;
     &lt;/form&gt;
  &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice how the inputs stretch almost as far as the text area, but not quite. Thanks!</p>