0
208
ViewsWhy are the "date" and "time" entries not displayed correctly in Google Chrome Mobile?
I have a small scheduling system that I developed (Look here).
The "date" and "time" entries are showing normally in most desktop and mobile browsers:
But for a reason I don't know! In Google Chrome Mobile, a gray background color appears in the "date" and "time" fields. Also, the default icons are gone:
I tested in all browsers, but this only happens with Google Chrome Mobile. I want to fix this soon, I don't know what's going on and I've been at this for 1 week.
I'm using Chrome version 101.0.4951.41.
This is the project repository on GitHub.
2 answers
Answer question0
It's the border property on the input: Chrome Mobile is setting the background of the date and time inputs to match the border.
I'm guessing you'd like all your inputs to match, so setting a background colour on inputs within your form will have the desired effect:
background-color: #fff;
I would also recommend not removing the outline, as that is used for accessibility reasons (screen readers).
So your whole style would look like this:
#form-field input {
width: 100%;
padding: 15px;
border: 1px solid #a3a3a3;
background-color: #fff;
margin: 10px 0;
}
Date and time inputs are relatively new and so cross-browser support is tricky (Safari Mobile notoriously didn't support a date picker for years). MDN has some guidance on detecting browser compatibility.
0
This issue is because of browser native control styles. You can override it by appearance/webkit-appearance:none property. after you need to give your own style to the component.
Please do more R&D on appearance/webkit-appearance and it will resolve your problem.
I have set appearance:none and see the below result. It's remove all arrow and make simple textbox
