Search code examples
htmlhtml-input

HTML 5 <input type"color" /> different on devices

I'm using the a standard input element which renders differently in mobile vs browser

<input type="color" />

Browser:

enter image description here

Mobile:

enter image description here

Why is this the case? I prefer the Browser version, so if I can force browser rendering for all it would be great

Solution

  • From <input type="color"> MDN Web Docs:

    The element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.

    Unfortunately there's no way to 'force' a specific presentation.

    In the 'Appearance variantions' you'll find some examples on different devices like the macOS system color picker.