0

So I have a button whose text I want to update so that one of the character is of say red color. The way I am achieving is by setting html to the button.

<div data-role="page" id="homepage">
   <div data-role="content">
    <a id='mybutton' href="#" data-role="button" data-icon="check">My Button</a>
   </div>    
</div>

​and here is how I update it through jQuery

.redtext{color:red;font-size:medium;text-shadow: aqua;}​

$("#mybutton").html("My Button(<span class='redtext'>0</span>)");​

The zero do come in red color but the button shape is now distorted and style removed it seems. Please see it a demo here http://jsfiddle.net/tqeF9/

Thanks in advance.

lazyguy
  • 963
  • 1
  • 13
  • 33

1 Answers1

2

Add .ui-btn-text to your selector.

E.g. $("#mybutton .ui-btn-text").html("My Button(<span class='redtext'>0</span>)");​

See this post for the reason.

Community
  • 1
  • 1
Marcus
  • 5,407
  • 3
  • 31
  • 54