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!
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.
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With