3

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:

enter image description here

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:

enter image description here

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.

Leandro
  • 63
  • 7

2 Answers2

4

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.

Curious Toad
  • 78
  • 11
  • And are the missing icons and default values ​​"dd-mm-yyyy" and "--:--" also browser behaviors? – Leandro Apr 30 '22 at 14:09
  • I don't think the date format (dd-mm-yyyy vs yyyy-mm-dd etc) is standardised between browsers as yet, though it's been a while since I've looked at it. It *should* default to the users locale settings. For example, UK users will have the day first, month second, but US users will have month first, day second. – Curious Toad May 01 '22 at 16:39
  • I'm on my phone at the moment so I can't check your link, but did you set a colour on the icons? If they're SVG you may need to set the `fill` colour. – Curious Toad May 01 '22 at 16:40
  • The first icon in the first field I added, however the last two icons are the browser's default. The first icon appears normally, but the last two disappear. See the effect on your own mobile. – Leandro May 01 '22 at 17:14
  • Please see [this post](https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker) - using a `filter` could help. As mentioned in this thread though, it will vary between browsers still. As I've supplied links to existing threads and MDN, my answer should still be accepted. :) – Curious Toad May 02 '22 at 22:43
  • I have tested all the examples, but on chrome mobile still, the default icons and texts disappear. I think the most sensible would be to use Jquery ([Datepicker](https://jqueryui.com/datepicker/)) and set the field value to a current date. – Leandro May 03 '22 at 16:53
2

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

enter image description here

Hardik Solanki
  • 325
  • 1
  • 6