Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input border CSS

Tags:

html

css

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!

like image 894
Hudson Taylor Avatar asked Oct 23 '16 18:10

Hudson Taylor


People also ask

How do you input a border?

First, you can use calc() to allow for this. ... where 2px is the combined left and right border widths. Next, you can use box-sizing: border-box , which tells the browser to include any padding and border within the width, rather than making it extra as currently.

How do I make my input box border thicker?

Go to Format > Shape Outline, point to Weight, and then choose a thickness. If you don't see the Format tab, make sure you've selected the text box or shape.


1 Answers

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)

like image 161
Praveen Kumar Purushothaman Avatar answered Sep 24 '22 06:09

Praveen Kumar Purushothaman