Open Bug 1435665 Opened 2 years ago Updated 3 months ago

input type=button background-color should be rgb(240, 240, 240) on Android.


(Core :: Widget: Android, enhancement, P3)

58 Branch



Webcompat Priority P3
Tracking Status
firefox60 --- affected


(Reporter: karlcow, Assigned: denschub)




(Whiteboard: [webcompat:p3])

This is a spin-off of a webcompat issue

some websites rely on the background-color of <input type=button> to get a meaning rendering or cosmetic effect.

On macos, the button color is defined as buttonface which is rgb(240, 240, 240)

but on Android, the background-color is white rgb(255, 255, 255) and is defined in content.css
So this is a bit more complex than just the background-color. 
We need to check also other color definitions such as border-color, etc.
In some design the buttons are barely visible. See
So this is another one with input type='text' where the disabled background is grey and create a difference of rendering.

Probably this issue needs to be widen a bit in scope and assess the differences of styles in between Safari/Chrome/Firefox and Edge for all the user agent stylesheet values.
See Also: → 1352238
Assignee: nobody → kdubost
As of today, documenting.
(I need to double check on devices, some values seem strange)

The CSS defined for Android
* Gecko (Android)

* Blink

Maybe relevant too Bug 598421

In Chromium we get
/* form elements */

input {
    background-color: white;

textarea {
    background-color: white;

input[type="hidden" i], input[type="image" i], input[type="file" i] {
    background-color: initial;

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FAFFBD !important;

input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    background-color: ButtonFace;

input[type="color" i] {
    background-color: ButtonFace;

input[type="color" i]::-webkit-color-swatch {
    background-color: #000000;

input[type="color" i][list]::-webkit-color-swatch {
    border-color: #000000;
}e, i

input::-webkit-calendar-picker-indicator:hover {
    background-color: #eee;

select {
    background-color: white;


So in Chrome, <input type="button">

    background-color: ButtonFace;
    border: 2px outset ButtonFace;

as for the ButtonFace value, it seems to be defined as

    case CSSValueButtonface:
      return 0xFFC0C0C0;

which means rgb(192,192,192) to double check on an Android device.

while in Firefox <input type="button">

  background-color: var(--form_background);
  border-color: var(--form_border);
  border-radius: var(--form_border_radius);
  border-width: 1px;
  border-style: solid;

which resolves to

  --form_background: white;
  --form_border: #bfbfbf;
  --form_border_radius: 2px;
Flags: webcompat+
Whiteboard: [webcompat] → [webcompat:p3]
Let me unassign myself here. I don't have the bandwidth for now.
Assignee: kdubost → nobody
Assignee: nobody → dschubert
See Also: → 1546049

See bug 1547409. Migrating webcompat priority whiteboard tags to project flags.

Webcompat Priority: --- → P3
You need to log in before you can comment on or make changes to this bug.