Text box sizing problem

[LeonLatex]

I am working on a new project, and I have a problem with CSS and the size of a text box for username/email. I want the box to change size like the password box, because that one works, but not the box for username/email. I am pasting the HTML and CSS below. Thank you for all your help.

 

<form method="POST" action="login_process.php">
	<div class="login_div">
    <input type="text" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Passord" required>
	<label for="showPassword">Vis passord</label><input type="checkbox" id="showPassword"><p>
    <button type="submit">Login</button>
	</div>
</form>

<script>
    document.getElementById("showPassword").addEventListener("change", function () {
        var passwordInput = document.querySelector("input[name='password']");
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
        } else {
            passwordInput.type = "password";
        }
    });
</script>

 

/* CSS Document */
/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

h2 {
    color: #333;
}

form {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 5px;
	font-size: 11px;
    font-weight: normal;
}

input[type="email"],
input[type="password"] {
    width: 30%;
    padding: 2px;
    margin-bottom: 0px;
    border-radius: 5px solid thin #000;
    font-size: 14px;
}

input[type="submit"] {
    display: block;
    width: 10%;
    padding: 10px;
    background-color: #333;
    color: #fff;
    border:thin;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #fff;
}

 

[requinix]

I don't know what you mean by "change size", but I can't help but notice that you have CSS for type=email and type=password inputs and not for type=text inputs.

I'm also going to assume you're already aware that the type=submit rules aren't going to apply to your submit button.

[LeonLatex]

requinix, the problem is that the username/email does not match the specified size in the CSS document. The password field does, but not the username field. I know that this is probably a trivial issue, but I can't seem to spot the triviality. There might be an extra letter or one missing altogether.

[requinix]

3 hours ago, LeonLatex said:

requinix, the problem is that the username/email does not match the specified size in the CSS document. The password field does, but not the username field. I know that this is probably a trivial issue, but I can't seem to spot the triviality. There might be an extra letter or one missing altogether.

You're right, it is a trivial thing that you're missing. (At least, as far as I understand what's going on...)

This is probably a good place for the rubber duck approach:
Imagine someone is sitting next to you (or find an actual person you can talk to) and explain to "them", in detail, about your username/email input and about the CSS. Pretend "they" don't know much about CSS or HTML. Tell "them" about how the CSS works and how it knows to resize that input. Point out the relevant code to "them" as you go.

It should take you a few minutes to do this exercise - any faster means you're rushing through it.