[SOLVED] CSS Submit button text align styles don't work in iOS

CSS Submit button text align styles don't work in iOS

I've been trying to get my website to look uniform on iOS. It seems that iOS applies default styles to any buttons used in forms. I have managed to remove all default styles except the button text refuses to align center on iOS. Instead aligns right.

I have tried everything relevant I could find. Here's the code.

input[type="submit"] {
  width: 100%;
  color: white;
  background-color: #012F50;
  padding: 1.25em 0;
  font: inherit;
  font-size: 1rem;
  border-radius: 0;
  border: none;
  text-align: center;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/badge.svg" />
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My site</title>
</head>

<body>
  <div>
    <form action="#">
      <input type="submit" value="Continue" />
    </form>
  </div>
</body>

</html>

This is the website on Windows in Chrome
This is still on desktop but in mobile view point
This is the submit button on IOS in Chrome

The answer in this post CSS property text-align being overridden by iOS Webkit for submit button suggested that specifying the width for the button was the problem and that rather I should use padding to align the text which makes no sense. I want my button to cover the full width of the container.

Note: This is a Vite project and I'm able to view the website on my iPhone via the local dev server. I'm not sure whether this is relevant. I suspect the issue is only CSS related.

Solution

You Can Add Display Flex To Your Code :

display: flex; /* to active display flex */
justify-content: center; /* center horizontally */
align-items: center; /* center verticaly */

Final Code: input

[type="submit"] {
  width: 100%;
  color: white;
  background-color: #012F50;
  padding: 1.25em 0;
  font: inherit;
  font-size: 1rem;
  border-radius: 0;
  border: none;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* Fix for iOS text alignment */
  display: flex;
  justify-content: center;
  align-items: center;
}