Home/ Questions/Q 8633549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:30:37+00:00

In Google Chrome, <input type=color> creates an input with a big bar of color

  • 0

In Google Chrome, <input type="color"> creates an input with a big bar of color inside it and by default, opens a colorpicker (looks like it’s OS dependent, mine has a Windows skin). I’m using a custom colorpicker globally that hooks into type="color" which looks like this in most browsers:

text input with colored borders

But in Chrome it looks like this:

solid colored bar with padding and a colored border

If you’ve never seen it before, a bare-bones one looks like this (Windows 7 64bit Google Chrome Version 22.0.1229.79 m):

enter image description here

The custom colorpicker overrides the default one just fine, but the problem is the way it’s displayed in Chrome. Another problem is that I can’t seem to clear the value (have tried js), the default value is always #000000 and can’t be set to an empty one.

It may or may not be true that if I don’t want this behavior I shouldn’t use type="color", but sometimes I find Chrome’s UI a little too aggressive. Changing all the input types is not something I look forward to, and I’m not positive what else the app is doing with them so I could end up breaking something else. I’ve had similar issues with date pickers.

Is there any way to change this behavior in Chrome so I can have a normal text-like field? JavaScript/jQuery is an option, but if it can be done with CSS -webkit rules somehow that would be great.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should not use type=color in this case. According to the standard, input[type=color] can’t have an empty value.

    If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string “#000000”.

    • 0