Currently, I'm in the process of adjusting the appearance of my text field inputs within a contact form. My intention is to have only a bottom border visible, and while this displays correctly in Chrome, the same cannot be said for Safari on mobile devices where the entire border remains visible. To visually illustrate this discrepancy, please refer to the images provided below.
Chrome Version 91.0.4472.114 (MacOS)The text field appears as intended with no issues on Chrome.
Safari iOS 14.6
https://i.sstatic.net/03PtJl.jpg
In comparison, when viewed on my mobile device via Safari, some portions of the top corners of the border are still visible, and the bottom border seems slightly curved, making it less aesthetically pleasing.
css
export const TextField = styled.input`
width: 100%;
background: #131d32;
border: none;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
min-height: 35px;
color: white;
outline: 0;
border-width: 0 0 2px;
:focus {
border-width: 0 0 1px;
}`;