0

I created my button as

   <a href = "#" data-role = "button" data-theme = "a" id = "button_style" onClick = "check()">

and I tried to apply styles to it as

.button_style{
     ---
 }

Both CSS and jQueryMobile effects are not applicable to the button. If I include both CSS styles and jQueryMobile styles then jQueryMobile effects like data-theme etc., are not applicable to button. But I need both CSS styles and jQueryMobile styles to HTML tag elements. How can I achieve both the things for the button?

3
  • There is no class on the button. I can see only ID so you will need use like this #button_style
    – Dips
    Jun 12, 2012 at 4:30
  • you define ID in anchor tag & give style in class.
    – sandeep
    Jun 12, 2012 at 4:33
  • I write #button_style, still problem is not solved..
    – user25
    Jun 12, 2012 at 4:44

4 Answers 4

0

Because instead of using Id (#) .You used the class notation (.) .Hence it is not applicable

Use

#button_style
{
 ---
 }
0

I just created a Jsfiddle with your code. By changing to #button_style the style works fine.

Check it. Cheers !!!

1
  • Thank you, but data-theme is not applied for button... CSS styles are applied but jQueryMobile themes are not applied..
    – user25
    Jun 12, 2012 at 5:11
0

you use .button_style.. this indicates button_style is a class. but you have a button that id is button_style.. so you should use

#button_style{
 ---

}

check this link // Edited

http://jsfiddle.net/fLq3C/45/

8
  • #button_style{ width : 40px !important; height : 40px !important; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(63,67,75)), color-stop(1, rgb(40,42,47)) ) ; background: -moz-linear-gradient( center bottom, rgb(63,67,75) 0%, rgb(40,42,47) 100% ) !important; padding: -3px; -webkit-border-radius: 9px !important; } }
    – user25
    Jun 12, 2012 at 4:51
  • css is appleid .. Check it my answer. Jun 12, 2012 at 4:55
  • CSS is applied but jQueryMobile style data-theme, data-inline are not applied
    – user25
    Jun 12, 2012 at 4:56
  • put data-inline="true" attribute Jun 12, 2012 at 4:59
  • hey friend actually what u want? Jun 12, 2012 at 5:25
0

well without seeing what exactly you wanted here is my attempt:

I pieced together from other answers and comments:

CSS:

.button_style {
    width : 40px !important;
    height : 40px !important;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(63,67,75)), color-stop(1, rgb(40,42,47)) );
    background: -moz-linear-gradient( center bottom, rgb(63,67,75) 0%, rgb(40,42,47) 100% ) !important;
    padding: -3px;
    -webkit-border-radius: 9px !important;
}

HTML:

<div>
    <a href="#" data-role="button" data-theme="a" class="button_style" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="b" class="button_style" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="c" class="button_style" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="d" class="button_style" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="e" class="button_style" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="a" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="b" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="c" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="d" onClick="check()">Test Button</a>
    <a href="#" data-role="button" data-theme="e" onClick="check()">Test Button</a>
</div>

My thoughts are you could you do this with the Theme Roller?

Also there are some button options you might try:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.