user2976972
user2976972

Reputation: 33

JQuery Mobile: Grey circle around icon when i remove disc

So I want the background to be completely transparent on my icon so I have the code:

<a data-transition="slideup" href="#menu" data-icon="bars" data-role="button" data-iconpos="notext" data-iconshadow="false" class="ui-nodisc-icon">Menu</a>

But when I added the ui-nodisc-icon class, a strange grey circle appears around my icon:
icon with class="ui-nodisc-icon" added

Any ideas what's causing this and how it can be fixed?

Upvotes: 0

Views: 1880

Answers (1)

ezanker
ezanker

Reputation: 24738

For a transparent, borderless button, try this:

<a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all ui-nodisc-icon transparentButton">No text</a>

.transparentButton {
    background-color: transparent !important;
    border: 0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Here is a DEMO

The CSS removes the background color, the border, and the box-shadow assigned by the jQM framework.

Upvotes: 6

Related Questions