Trying to avoid problem with type=color

[phppup]

I recently had occasion to use

<input type="color">

It seemed like a nice idea until I viewed it on an IE 11 browser.

Since IE11 does not support the tag, it provided a text input instead of the COLOR input functionality.

The input field CAN be used as a substitute as long as acceptable color NAMES are typed, but the field size is much wider than it would be as type=color in a newer browser (and that alters the page layout).

Since a user COULD be using an older browser, it seems that controlling the WIDTH of the input should solve that problem.

The real issue is a way to create a script to determine whether the setting adjustment is even necessary.

Something like

if (input [type='color'] != a cute button with a color graphic) {
  input.width = 10px;
  }

Insightful responses, please.

PS: While on the topic, does anyone happen to know the DEFAULT settings for input="text" with regard to the height, width, font size, font family of the field?

 

 

 

Edited November 19, 2021 by phppup
Typos

[requinix]

Two words: browser detection. As in using IE's conditional tags.