How to remove jquery mobile button color or override button css?

Question

I am using jQuery mobile in my sample project. I have three buttons. I am changing the style of the buttons (adding my own CSS) so that it overrides jQuery button CSS. But while adding it still shows some small white background. I inspect the page and find it is jQuery mobile button. I am not able to override that background. Here is my attempt: http://jsfiddle.net/naveennsit/5DDBD/

.ui-grid-c .ui-btn-inner {
    background: #2b6dbc; 
    color: #FFFFFF; 
    border: 1px solid #000; 
    border-radius: 3px; 
    width: 100px; 
    text-shadow: none; 
    margin-left: 4px; 
}

Using the DOM inspector, when I removed this background: 2b6dbc it will show jQuery mobile button.

How can I remove that?

After adding this, it changing the color on focus and unfocus.

.ui-btn-up-c{background:#2b6dbc; color:#FFFFFF; border:1px solid #000; border-radius:3px; width:100px; text-shadow:none; margin-left:4px;}

Looks like your .ui-btn-inner's width is wider than the .ui-btn... — Mr. Polywhirl
– Mr. Polywhirl, Commented Aug 9, 2013 at 9:50
I added a response below. You are changing the with of the inner, but you forgot to change the width of the button itself. — Mr. Polywhirl
– Mr. Polywhirl, Commented Aug 9, 2013 at 9:55

Mr. Polywhirl · Accepted Answer · 2013-08-09 09:52:54Z

1

Alter the ui-btn directly: http://jsfiddle.net/5DDBD/5/

.ui-btn {
    background: #2B6DBC;
    text-shadow: none;
}

.ui-btn-inner {
    color:#FFFFFF;
}

answered Aug 9, 2013 at 9:52

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Omar Over a year ago

note that will change all elements with ui-btn and ui-btn-inner. Its advisable to identify them by a custom class i.e. .ui-custom .ui-btn

Rajiv007 · Accepted Answer · 2013-08-09 09:32:41Z

0

The CSS are inheriting from ".ui-btn-up-c" class. It is defined in your "c" theme (data-theme = c).

So the best way to define your own "c" theme in Theme Roller jquery Mobile. http://jqueryui.com/themeroller/

Or you can change the background from ".ui-btn-up-c".

answered Aug 9, 2013 at 9:32

Rajiv007

1,1347 silver badges13 bronze badges

1 Comment

user2648752 Over a year ago

can you do some change on my fiddle for better understand

Jithesh · Accepted Answer · 2013-08-09 09:49:07Z

0

Add your custom css to .ui-btn instead of .ui-btn-inner

.ui-grid-c .ui-btn
{
background:#2b6dbc; 
color:#FFFFFF; 
border:1px solid #000; 
border-radius:3px; 
width:100px; 
text-shadow:none;
margin-left:4px; 
}

See here.. http://jsfiddle.net/5DDBD/2/

answered Aug 9, 2013 at 9:49

Jithesh

9824 silver badges10 bronze badges

1 Comment

user2648752 Over a year ago

but previous button is not looking good..!! if the width of all buttons same it look good..?

Vuong · Accepted Answer · 2013-08-09 09:49:14Z

0

".ui-grid-c > :nth-child(n)" on jquery.mobile-1.3.0-beta.1.css, you can fixed it:

.ui-grid-c > :nth-child(n){
/* width: 25% */
margin-right:5px;
border:none;
}

and ".ui-grid-c .ui-btn-inner" remove margin-left:4px property.

answered Aug 9, 2013 at 9:49

Vuong

64711 silver badges28 bronze badges

1 Comment

user2648752 Over a year ago

can you change on my fiddle?

Frank Fajardo · Accepted Answer · 2013-08-09 10:12:35Z

0

You need to remove the width and margin-left properties from .ui-grid-c .ui-btn-inner.

answered Aug 9, 2013 at 10:12

Frank Fajardo

7,4291 gold badge31 silver badges49 bronze badges

1 Comment

Frank Fajardo Over a year ago

Sorry I think I misunderstood your question. I thought you just wanted to remove the white space around the button. I can see you already found the answer so no need to modify mine.

Collectives™ on Stack Overflow

How to remove jquery mobile button color or override button css?

5 Answers 5

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related