Input border CSS

css, html

Solution

You need to use the `box-sizing` to `border-box` to add `width` as well, as `border` too takes up its own width:

* {
  box-sizing: border-box;
}
#wrapper {
  width: 170px;
}
textarea {
  border-color: #eee;
  border-width: 1px;
}
label, textarea, input {
  width: 100%;
  display: block;
}
input {
  border-style: solid;
  border-width: 1px;
}

<div id="wrapper">
  <form>
    <label for="comments">Comments</label>
    <textarea name="comments" rows="5"></textarea>
    <label for="date">Date</label>
    <input type="text" name="date">
    <label for="time">Time</label>
    <input type="text" name="time">
    <label for="longitude">Longitude</label>
    <input type="text" name="logitude">
    <label for="latitude">Latitude</label>
    <input type="text" name="latitude">
  </form>
</div>

Explanation

The CSS box model, by default is `content-width` defines the total dimension as:

width = contentWidth + paddingLeftWidth + borderLeftWidth
height = contentHeight + paddingLeftHeight + borderLeftHeight

(source: binvisions.com)

Problem

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: CSS ``` #wrapper { width: 170px; } textarea { border-color: #eee; border-width: 1px; } label, textarea, input { width: 100%; display: block; } input { border-style: solid; border-width: 1px; } ``` ``` <div id="wrapper"> <form> <label for="comments">Comments</label> <textarea name="comments" rows="5"></textarea> <label for="date">Date</label> <input type="text" name="date"> <label for="time">Time</label> <input type="text" name="time"> <label for="longitude">Longitude</label> <input type="text" name="logitude"> <label for="latitude">Latitude</label> <input type="text" name="latitude"> </form> <div> ``` Notice how the inputs stretch almost as far as the text area, but not quite. Thanks!

Original source