CODEWITHSUNDEEP
htmlcsscross-browser
Qaz
Qaz

Reputation: 1576

Textarea and input have different widths

textarea,
input {
  width: 300px;
}
<textarea id="input"></textarea>
<br>
<input type="submit">

Why do the input and textarea display with different widths? What properties do I need to add to make them the same width?

UPDATE: By setting border and padding to 0px, I can make them display at the same width. Nobody wants padding:0px, though, and, strangely, when the padding is, say, 10px for both, they aren't the same width anymore. Now that I've found a solution with padding:0px, I'm still interested in an explanation and a solution that allows me still to have padding.

(I'm using Chrome 35 on Windows 7.)

Upvotes: 18

Views: 6439

Answers (3)

Jim Vogel
Jim Vogel

Reputation: 1

The textarea font-size seems different by default. Just making all input and textarea font-size the same work for me.

.flex {
  display: flex;
}
.flex-justify-center {
  justify-content: center;
}
.flex-column {
  flex-direction: column;
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.contact-form-container {
  width: 50%;
  display: flex;
}

.contact-form-container form label {
  display: block;
  font-weight: 700;
}
.contact-form-container form input,
textarea {
  display: block;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 1rem;
}
.contact-form-container form textarea {
  min-height: 80px;
}
<section class="contact flex flex-column flex-align-center">
  <h1 class="underline">Une question ? Contactez nous</h1>
  <div class="flex flex-justify-center contact-form-container">
    <form action="#">
      <label for="name" class="my-20">Nom</label>
      <input type="text" name="name" id="name" />
      <label for="nom" class="my-20">Email</label>
      <input type="email" name="email" id="email" />
      <label for="question" class="my-20">Question et remarque</label>
      <textarea name="question" id="question"></textarea>
      <button class="btn btn-dark my-20">SOUMETTRE</button>
    </form>
  </div>
</section>

Upvotes: 0

Robert Hubert
Robert Hubert

Reputation: 1

This didn't work for me, I see this post is almost 10 years old. I found a solution by setting both to width:100%. This keeps them the same size. Wrap them in a Div container and adjust the width of the container to the desired size.

Upvotes: 0

Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Try setting it like this:

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/QV9PE/

The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box.

We can now safely declare our textarea to be of 300px width, including pixel-based padding and border, and accomplish out layout perfectly.

Upvotes: 21

Related Questions