Building an interactive form: Additional changes

That was longer than I initially expected... but the journey doesn't stop with that last post, and it hasn't stopped yet.

After publishing this series, I continued looking into the code and improving some things here and there. I will edit this post with the changes I've done and the reasoning behind it.

Fix button for mobile

One thing I noticed on mobile (and on iOS in particular) is that the input of type "submit" is not styled as expected. Making it look like a native button rather than the styled button on other platforms.

One option to fix that is to transform the input into a button (keeping the type "submit" so it sends the form automatically on click).

The change on the HTML was from this:

<input type="submit" value="Log In" name="submit" id="submit" />

to this:

<button type="submit" id="submit">Log in</button>

And in the CSS, I added the button selector wherever I was styling the input type submit:

/* added button here */
input,
button {
  ...
}

/* and replace input[type="submit"] with button[type="submit"] here... */
button[type="submit"] {
  color: hsl(var(--bgColorH), var(--bgColorS), var(--bgColorL));
  background: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: 1rem;
  padding-left: 0;
  text-transform: uppercase;
  transition: all 0.125s;
  cursor: pointer;
}

/* ...here... */
button[type="submit"]:focus,
button[type="submit"]:hover {
  background: hsl(var(--fgColorH), var(--fgColorS), calc(var(--fgColorL) * 0.85));
}

/* ...and here. */
button[type="submit"]:active {
  background: hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));
}

It is a small change, but it makes a big difference on mobile.

This is how it looks after the changes: