HTML form input width

Question

I have this code below which is a simple html form. What i'm trying to do is make all of the inputs have max widths inside the form-panel and look something like the image below.

I tried setting max-width for all the inputs inside the panel but it doesn't seem to be working. Any help would be greatly appreciated.

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  max-width: 100%;
}

.form-panel {
  display: table;
  background-color: #b7bcbe;
}

<body>
  <div class="form-panel">
    <div class="form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-email">
      <input type="email" name="email" placeholder="Email Address">
      <br>
    </div>
    <div class="form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">


</body>

Khiem Tran · Accepted Answer · 2018-07-03 06:18:37Z

You can use flex-box instead of table.

As you use display: table - the column will have the same width (there is no colspan option)

Use display: flex for each columns and set flex-grow: 1 so that all elements will grow up and fill the parent.

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  flex-grow: 1;
}

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

.form-panel {
  background-color: #b7bcbe;
}

<body>
  <div class="form-panel">
    <div class="form-row form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-row form-email">
      <input type="email" name="email" placeholder="Email Address">
      <br>
    </div>
    <div class="form-row form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">


</body>

Sakkeer A · Accepted Answer · 2018-07-03 06:17:41Z

1

You have written common css for all input elements..write separate css for that particular input field and put important.

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  max-width: 100%;
}

.form-panel {
  display: table;
  background-color: #b7bcbe;
}

<body>
  <div class="form-panel">
    <div class="form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-email">
      <input type="email" name="email" style="width: 100%;max-width: 86%;" placeholder="Email Address">
      <br>
    </div>
    <div class="form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">


</body>

edited Jul 3, 2018 at 6:17

answered Jul 3, 2018 at 6:10

Sakkeer A

1,1203 gold badges17 silver badges40 bronze badges

5 Comments

לבני מלכה Over a year ago

explain what you did

Sakkeer A Over a year ago

You have to set inline Css for the particular input tag.

לבני מלכה Over a year ago

I mean inside your answer when other OP see it they understand what to do

Best Jeanist Over a year ago

@A.Sakkeer hmmm that works but isit the best way to do?

Sakkeer A Over a year ago

I have changed my inline style for that 'Email Address Field'.

Ehsan · Accepted Answer · 2018-07-03 06:41:45Z

just add this line:

.form-email input {width: calc(100% - 20px);}
                                       ^--------[margin-left + margin-right]

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  max-width: 100%;
}

.form-panel {
  display: table;
  background-color: #b7bcbe;
}

.form-email input {width: calc(100% - 20px);}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <div class="form-panel">
    <div class="form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-email">
      <input type="email" name="email" placeholder="Email Address">
      <br>
    </div>
    <div class="form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">

Collectives™ on Stack Overflow

HTML form input width

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related