The following HTML:
<!DOCTYPE html>
<style>
span,textarea,div {
border: 1px solid black;
max-width: 300px;
height: 20px;
}
</style>
<div></div><br>
<textarea></textarea><br>
<input type=text><br>
Renders the following in Chrome and FF.

Why isn't the <textarea> and the <input> as wide as the <div>?
Most browsers respect max-width, but INPUT and TEXTAREA elements typically have a width set by default in the user agent CSS. You can add this CSS for a consistent rendering:
input,textarea{width:100%;display:block}
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