Wayne Wayne - 4 months ago 14
CSS Question

jQuery Buttons - Unusual CSS Styling

Within my PhoneGap application I have the following form button:

<input type="button" value="Proceed" id="proceed">


I have in my stylesheet the following to overwrite the original jQuery mobile:

#proceed {
background-color: red;
opacity: 1;
width: 50%;
}


If I don't set opacity to 1 then the background colour is washed out and not much use. When I set it to 1 however, the "background" colour of red appears over the text (reflected by the "value" in html) "Proceed" which is the problem here.

Further, despite having width set to 50%, the button seems to hold a width of 100% with an internal box of 50% width in red. I am not sure where this internal box effect has come from - it must be a jQuery feature as it is not in my code.

This looks unusual - how can I style the button as a whole? Or more simply, how can I have the value of the button appear on top of the background color?

Answer

Here's your code:

#proceed {
    background-color: red;
    opacity: 1;
    width: 50%;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<input type="button" value="Proceed" id="proceed">

If you inspect the funky button (right click on it and select "Inspect" or "Inspect element"), you'll see that jQuery mobile wraps the button in extra html:

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
  Proceed
  <input type="button" value="Proceed" id="proceed">
</div>

To change it's color, you have to change it's theme using data-theme:

<input type="button" value="Proceed" data-theme="a">

By default, jQuery Mobile has few themes built in: white (data-theme="a"), black (data-theme="b"), etc. Red isn't one of them, so I guess you have to create a theme (using their web site) and then add the theme's generated CSS files to your page.