Plain background colour for buttons is not supported by Firefox OS

Question

I ve created a button in html and styled it using css as below.

<input type="button" class="mainmenu" value="Practice"/>

.mainmenu{
background-color:#FF0000;
}

It is working fine on all browsers with background color of the button as plain red but when it is made into a Firefox OS app instead of plain red color as background I see light red color with the button like appearance. I don't want this button like appearance. How to get rid of it?

This is how I see in normal browsers.

When Installed on Firefox OS phone or Firefox OS emulator

You might have to remove set other styles such as the border. By removing the border, it should disable the button style view. — Loïc Faure-Lacroix, Jul 25 '15 at 15:16
That does not solve the problem ` .mainmenu{ background-color:#FF0000; border:none; color:#FFFFFF; }` — Sandeep Thedarkprince C, Jul 26 '15 at 17:42

score 2 · Accepted Answer · answered Jul 27 '15 at 06:53

It is because default FFOS browser's style for input[type="button"] has a linear-gradient as background, which is actually a background-image property, thus not overridden by your background-color="#FF0000".

You can override it by changing your background-color to background.

score 0 · Answer 2 · answered Jul 07 '15 at 20:17

0

Have you tried

.mainmenu{
    background-color:#FF0000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

This should remove the native styling of your input button.

answered Jul 07 '15 at 20:17

crazymatt

3,266
1
25
41

Plain background colour for buttons is not supported by Firefox OS

2 Answers2