Here is the CSS code I used for styling a form's submit button:
.submit {
-webkit-appearance: none !important;
text-align: center !important;
border-radius: 0rem;
color: rgb(63, 42, 86);
display: inline-block;
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
width: 3.6rem;
height: 2.2rem;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
}
Initially, there were some formatting issues on iOS which I resolved by using -webkit-appearance: none. However, this caused the "Submit" text to align to the right instead of being centered as intended on iOS devices, as shown in this image:
In contrast, when viewed on desktop browsers like Chrome and Safari, the text appears centered as expected, as shown in this image:
I have ruled out specificity issues as the !important declaration for text-align: center should take precedence over other styles in my CSS. Any insights into why the alignment behaves differently on iOS would be greatly appreciated. Thank you!
CodePen Link: https://codepen.io/benwerner01/pen/BqErOE (Please note that the HTML renders correctly on CodePen, but when viewed on Safari or Chrome on iOS, the button breaks. To see this issue in action on a mobile device, visit )