CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Bill Jones
Bill Jones

Reputation: 701

Set button color in jQuery mobile?

I have a jQuery Mobile app. This application has a single button that I need to give a special color.

In other words, there is only one button in this entire app that uses this color. I need to set it via CSS.

Currently, I have the following:

<input type="button" value="My Button" style="background-color:#00ff21;" />

This approach changes the color of the button. However, the color is faded. I didn't believe it at first, so I tried:

<input type="button" value="My Button" style="background-color:yellow;" />

It's very clear that the button color is faded. How do I set the color of a button so that it doesn't appear faded?

Upvotes: 4

Views: 7185

Answers (2)

user3211782
user3211782

Reputation: 21

add a style background-color:yellow !important

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

Your problem comes from jQM styling of a input type button element. Your case is not going to work because you also need to set opacity to 1:

opacity: 1;

Opacity is a main reason why color looks faded.

Unfortunately this is not going to work. I am not going to explain why, try it for your self and see a difference.

Only way you can succeed is to create a button like this:

<a data-role="button" id="custom-btn" style="background:yellow;">Custom Button</a>

Live example: http://jsfiddle.net/Gajotres/bfMNu/

Upvotes: 2

Related Questions