Input type email not behaving same as other input elements with same css class

Question

I have a form wrapped in a div, each form element and input element have a class .form-container

 <div class="form-popup" id="myForm">
  <form method = "post" action="<?php echo $_SERVER['PHP_SELF'];?>" class="form-container">
    <h1 style="color: white;">Login</h1>

    <label for="name" style="color: white;"><b>Username</b></label>
    <input type="text" placeholder="Enter username" name="name" required>

    <label for="email" style="color: white;"><b>Email</b></label>
    <input type="email" placeholder="Enter email" name="email" required> 

    <label for="psw" style="color: white;"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="password" required !important>

    <button type="submit" class="btn">Login</button>
    <button type="submit" class="btn cancel" onclick="closeLogInForm()">Close</button>
  </form>
</div>

The form-container class:

  /* Full-width input fields */
.form-container input[type=text], .form-container input[type=password], .form-container input [type=email]{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

For some reason only the input element holding type="email" is not rendering as the other input elements , although the same .form-container class is applied :

Entering any number of input elements to the form with the type text or password works fine. So what could be causing this unexpected rendering?

score 2 · Answer 1 · answered Apr 29 '20 at 09:30

Simply with checking your CSS, you will notice that you have a typo in your stylesheets. Where you define input [type=email] there is an unnecessary space between input and [type=email], so you should make it this way:

/* Full-width input fields */

.form-container input[type=text],
.form-container input[type=password],
.form-container input[type=email] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

NOTE: If you want to all of your input take effect of your style you can simply do the following (I strongly suggest this one in your case):

/* Full-width input fields */

.form-container input {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

score 1 · Answer 2 · answered Apr 29 '20 at 09:30

1

There is a space in your email selector.

.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="email"] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

answered Apr 29 '20 at 09:30

Jonathan Akwetey Okine

1,295
2
15
18

score 1 · Accepted Answer · answered Apr 29 '20 at 09:35

1

.form-container input [type=email]

Notice that you have a space between input and [type=email].

Fix it and it should be fine

answered Apr 29 '20 at 09:35

agentp

335
4
17

Input type email not behaving same as other input elements with same css class

3 Answers3