CODEWITHSUNDEEP
htmlcssfirefox-os
Sandeep Thedarkprince C
Sandeep Thedarkprince C

Reputation: 172

Plain background colour for buttons is not supported by Firefox OS

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.

This is how I see in normal browsers

When Installed on Firefox OS phone or Firefox OS emulator

When Installed on Firefox OS phone or Firefox OS emulator

Upvotes: 2

Views: 448

Answers (2)

Kaiido
Kaiido

Reputation: 136628

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.

Upvotes: 2

crazymatt
crazymatt

Reputation: 3286

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.

Upvotes: 0

Related Questions