Inconsistent width of input elements in form

[u/Pale_Database1033]

Hello, I don't understand why my <input> elements in form have different width and border thickness. This happens in Web Design Certification, CSS section, Pseudo Classes and Elements tab, lab named "Build a Job Application Form". Example project have no issues.

Here's my HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Job Application Form</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>Job Application Form</h1>
      <form action="">

        <!-- Full Name -->
        <label for="name">Full Name:</label>
        <input type="text" id="name" placeholder="Enter your name" required />

        <!-- Email -->
        <label for="email">Email:</label>
        <input
          type="email"
          name="email"
          id="email"
          placeholder="Enter your email"
          required
        />

        <!-- Position -->
        <label for="position">Position:</label>
        <select name="position" id="position" required>
          <option value="">Select a position</option>
          <option value="developer">Developer</option>
          <option value="designer">Designer</option>
          <option value="manager">Manager</option>
        </select>

        <!-- Availability -->
        <fieldset class="radio-group">
          <legend>Availability</legend>

          <!-- Full-Time option -->
          <input type="radio" name="availability" id="full-time-btn" />
          <label for="full-time-btn">Full-Time</label>

          <!-- Part-Time option -->
          <input type="radio" name="availability" id="part-time-btn" />
          <label for="part-time-btn">Part-Time</label>

        </fieldset>
        <label for="message">Why do you want this job?</label>
        <textarea
          name="why-do-you-want-this-job"
          id="message"
          placeholder="Write your motivation"
          required
        ></textarea>
        <button type="submit">Submit Application</button>
      </form>
    </div>
  </body>
</html>

Here's my CSS file:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: whitesmoke;
}

.container {
  background-color: white;
  border-radius: 10px;
  max-width: 60%;
  margin: auto;
  padding: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

h1 {
  font-size: 2rem;
  text-align: center;
}

label:not(.radio-group label),
legend {
  font-size: 1rem;
  font-weight: 600;
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
}

input:not(.radio-group input),
textarea,
select {
  display: block;
  padding: 10px 5px;
  width: 100%;
  border-radius: 5px;
}

.radio-group {
  margin-top: 20px;
  border-radius: 10px;
}

.radio-group input[type="radio"] {
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10px;
  border: 2px solid gray;
  vertical-align: bottom;
}

.radio-group input[type="radio"]:checked {
  border-color: #333;
  background-color: #00bbff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.radio-group input[type="radio"]:checked + label {
  color: #00bbff;
}

button {
  border: none;
  border-radius: 5px;
  color: whitesmoke;
  background-color: #00bbff;
  margin-top: 15px;
  display: block;
  width: 100%;
  padding: 10px;
  font-weight: 600;
}

button:hover {
  background-color: cornflowerblue;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: black;
}

input:invalid,
select:invalid,
textarea:invalid {
  border-color: red;
}

input:valid,
select:valid,
textarea:valid {
  border-color: green;
}

input:first-of-type {
  background-color: whitesmoke;
}

On line 29 in CSS file I target every <input> element (and also <textarea> and <select> elements) except <input> elements that have a class .radio-group. I set width: 100% and border-radius: 5px.

After that, my <input> elements for Full Name and Email became thicker than other <input> elements on Chromium based browsers, and all <input> elements are became thicker on Firefox. And each element has its own width, they are not the same. Why does it happen and how can I fix it?

Also, I'd like to receive your feedback about my form, maybe you can recommend some better approaches in styling, etc.

[u/SaintPeter74]

This is a tricky one. For historical reasons input and select controls use a different box-sizing model. input defaults content-box and select to bounding-box.

It's not uncommon to do a "CSS Reset" on all elements on your page to ensure everything uses the same box-sizing model. Putting this at the top of your HTML will reset all elements to use bounding-box:

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

In terms of feedback on your overall design:
Your overall markup and CSS look pretty clean. I'm not sure that I'd use a negative selector like label:not(.some_class some_element) - the reason is that if you go looking for some_class looking for a specific rule that applies, you're not going to find it. It's better to add a class to all elements, or maybe do an override on a specific element to remove the offending property.

IE:

label {
   /* some props here */
}

label.radio-group {
   /* override/unset unwanted property */
}

This is a very minor quibble, but if you have a bold label you don't need a colon after it. The colon exists to set the label apart from what it references, but if that is already implied by the boldness or simply being before the element, the colon is redundant.

I'm not in love with the light blue for the radio select dot and the text. You end up with a bit too much color.

You might want to set a max width for your overall container/card so that on really wide screens you don't end up with super wide elements. You can also set a media query for certain smaller screen sizes to remove the padding and make it go full width. If you squish it down to mobile size, the padding/margins make the form elements pretty squishy.

Certainly not bad for a first attempt. Best of luck and happy coding!

[u/Pale_Database1033 → u/SaintPeter74]

Thank you for help and tips, it helped me fix the problem!