jquery-mobile: Getting rid of icon shadow

Question

I am currently having troubles with the css behind jQuery-Mobile. I have button that is defined like so in the html:

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
    <a href="#" class="previous" data-role="cus-button" data-shadow="false"></a>
    <a href="#" class="play playpause" data-role="cus-button" data-shadow="false"></a>
    <a href="#" class="stop" data-role="cus-button" data-shadow="false"></a>
    <a href="#" class="forward" data-role="cus-button" data-shadow="false"></a>
</div>

EDIT: Also tried with data-iconshadow, which had no effect.

By using the following css I was able to remove the square around my personal background image:

background-size: 100% !important;
background-repeat: no-repeat;
background-color: transparent;

display: inline-block !important;
height: 62%;
width: 10%;
margin-top: 2% !important;

border: 0;
border-radius: 0 !important;
outline: none !important;
text-decoration: none;

This removes the square around the icon, but every time the button is clicked, I still get a box in the background which is kind of highlighted by a blue shadow:

The strange part about that is, that a similar button, that is not in the footer-area of the site and has the same css, does not have the mentioned shadow.

They are defined like so:

<div id="controls-left">
     <a href="#" id="repeat" class="repeat" data-role="cus-button"></a>
     <a href="#" id="repeat-all" class="repeat-all" data-role="cus-button"></a>
     <a href="#" id="random" class="random" data-role="cus-button"></a>                    
</div>

Here is their css:

#controls-left a[data-role="cus-button"]{
    position: relative;
    background-size: 95% !important;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block !important;
    height: 40px;
    width: 40px;

    left: 0;
    right: 0;
    margin: auto;

    border: 0px !important;
    border-radius: 0 !important;
    outline: none !important;
    text-decoration: none;
}

Is there any jquery-mobile specific css, that will remove that box?

Answer 1

it looks like a active state that is styled by CSS, use FireBug or chrome/Safari inspector to see what styling in applyed on the active state, and overrule it in your css.

Here i did it for you:

So it comes down to this:

.ui-focus, .ui-btn:focus {
  box-shadow: 0 0 3px #387BBE inset, 0 0 9px #387BBE;
}

should be overuled:

.ui-focus, .ui-btn:focus {
  box-shadow: none;
}

Answer 2

Found the solution, but I am terribly confused as to why it actually works. As @Mark mentioned, the buttons in jQuery Mobile habe a box-shadow. I did not think about this, as I am using my own button-class. As seen in the markup in my original question. I just tried though and it turned out, that adding

box-shadow: none;

to the css of my button class actually worked. This in my opinion is a huge drawback of jQuery mobile (given you are using their css aswell). It does a lot of things right and is easy to configure, but as soon as you want to change a specific css-attribute (outside the possibillities of their theme-roller), you have to dig deep down and use a webdeveloper tool first.

Anyhow that's how it is done.

EDIT :

As mentioned by @Omar anchors in the header and the footer will automatically turned into buttons. That explains why I needed the box-shadow.