custom css styling for jquery mobile button

Question

I have this button which i have added a custom icon to.

I would like to remove the lighter gray which is within the icon. enter image description here

This lighter gray is not part of the icon, it's got to be somewhere within jquery's CSS which i should be able to overide. enter image description here

What can I do to my CSS to accomplish this?

You can view source on the link i've provided but here is the current CSS:

.ui-icon-my-map {
    background-image: url("images/103-map.png");
    background-position: 4px 50%;
    background-size: 26px 21px;
    height: 24px;
    margin-top: -12px !important;
    width: 35px;
}

Hannes · Accepted Answer · 2012-03-09 16:42:34Z

3

your problem is:

.ui-icon, .ui-icon-searchfield::after {
  background: #666;
  background: rgba(0, 0, 0, .4);
}

just add

.ui-icon-my-map {
[...]
  background-color: transparent;
}

answered Mar 9, 2012 at 16:42

Hannes

8,2575 gold badges35 silver badges51 bronze badges

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

Comments

Alytrem · Accepted Answer · 2012-03-09 16:41:39Z

2

You can overide with your css (put it after jquery mobile css load, or add important at the end).

.ui-icon, .ui-icon-searchfield::after {
background: none;
}

answered Mar 9, 2012 at 16:41

Alytrem

2,6101 gold badge14 silver badges13 bronze badges

2 Comments

capdragon Over a year ago

This removed my icon. hannes and thepriebe got it. (+1) for the effort.

Alytrem Over a year ago

It depends of where you do it. It works only if you change directly the css.

PREEB · Accepted Answer · 2012-03-09 16:44:23Z

1

For the style of this guy

<span class="ui-icon ui-icon-my-map ui-icon-shadow"></span>

Add:

background-color: transparent;

answered Mar 9, 2012 at 16:44

PREEB

1,3722 gold badges14 silver badges28 bronze badges

1 Comment

capdragon Over a year ago

(+1) for the effort but Hannes answered first.

ShankarSangoli · Accepted Answer · 2012-03-09 16:46:13Z

1

Set the background color of the span to transparent.

.ui-icon-my-map{
    background-color: transparent;
}

enter image description here

answered Mar 9, 2012 at 16:46

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

user1211577 · Accepted Answer · 2012-03-09 16:47:40Z

1

Go to jquery.mobile-1.0.1.min.css and go to line and find .ui-icon, .ui-icon-searchfield:after

Then on background change to

url("images/icons-18-white.png") no-repeat scroll 0 0 transparent;

instead of

url("images/icons-18-white.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4)

answered Mar 9, 2012 at 16:47

user1211577

Comments

Phill Pafford · Accepted Answer · 2012-03-09 16:59:21Z

0

Something like this work:

http://jsfiddle.net/tR9Cj/

HTML

<div data-role="page" id="home">
    <a id="bnt_edge" data-role="button" data-inline="false" data-transition="turn" href="#" rel="external" data-icon="my-map" data-theme="c" data-iconshadow="false">My Button</a>
</div>

CSS

.ui-icon-my-map {
    background-image: url("https://i.sstatic.net/zjB5L.png");
    background-position: 4px 50%;
    background-size: 26px 21px;
    height: 24px;
    margin-top: -12px !important;
    width: 35px;
    background-color: transparent;
}

answered Mar 9, 2012 at 16:59

Phill Pafford

85.5k92 gold badges268 silver badges385 bronze badges

Collectives™ on Stack Overflow

custom css styling for jquery mobile button

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related