css Question posted in
Some basic documentation can be found here.

CSS issue: textarea has a different width than text input fields

I’m putting up a simple form that consists of two input fields for text and one textarea, and I want everything to be aligned perfectly, all three items below each other. Of course I want them to be equally wide, but no matter what I do, the textarea still shows up a bit wider on the right side.
Any ideas?

Here’s what I have:

form {
    display: flex;
    flex-direction: column;
    max-width: 60%;
}

.form-groep {
    display: flex;
    flex-direction: row;
}

label {
    margin-bottom: 1rem;
    width: 20vw;
    font-size: 1.3vw;
}

input, textarea {
    padding: 8px;
    font-size: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 40vw;
    margin: 0;
}

textarea {
    resize: none;
    height: 10vw;
    box-sizing: border-box;
}

I tried changing every possible parameter I could think of, this is the best I could get after many attempts.

Upon request, here’s my HTML code as well:

        <form action="contactformulier.php" method="post">
            <div class="form-groep">
                <label for="naam">Naam *</label>
                <input type="text" id="naam" name="naam" tabindex="1" required>
            </div>
            <div class="form-groep">
                <label for="email">E-mailadres *</label>
                <input type="email" id="email" name="email" tabindex="2" required>
            </div>
            <div class="form-groep">
                <label for="bericht">Bericht *</label>
                <textarea id="bericht" name="bericht" tabindex="3" required></textarea>
            </div>
                <input type="submit" value="Verzend" tabindex="4"/>
        </form>
Tags:

2

Answers


  1. 0

    Spelling of ‘form-groep’ appears to be wrong. Is it ‘form-group’?
    If it is correct, then please paste the HTML code too.

    Login or Signup to reply.
  2. 0

    I would recommend first setting up a global style to "reset" the box-sizing.

    html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

    of course this is an opinionated solution, but this ensures your styles have more consistency.

    Take padding and margin in consideration as well, also the display value can affect how elements calculate width and height, for example label is "display: inline" by default, while other elements may have "block" or "inline-block" and may react different to the styles of width and height.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search